Loading AJAX contents before actually displaying them

I load an AJAX request after an animation finishes. However, I'd like to load the ajax, hide() where I've loaded it, and then simply show() it after the animation is done. The idea is that I won't have to worry about the user waiting for an image to load, and that I could replicate this in all places where I wait for an animation to finish. Even just text.

I could simply put it in some div styled as display: none;, and hide it, but it bothers me that it's still technically "there" on the page. Is there some way to load the content somewhere where the user cannot see it at all?

Solv开发者_运维技巧ed. It is true that I didn't want it in the DOM and was hoping there was some CSS3/HTML5 something-or-other that would 'hold' elements. :P As well, I knew others had a great way to do this, so I needed the best. I think I got it. Thanks, everyone.

Create a css class such as the following:

.hiddenelement
{
    position:absolute !important;
    left:0% !important;
    top:0% !important;
    width:0% !important;
    height:0% !important;
}

use .addClass('hiddenelement') when you hide an element, and .removeClass('hiddenelement') when you are showing it.

Of course, this won't work if you have inline styles marked !important.

Note: I believe this would likely work without the positioning as well.

You could load the content off the screen (such as position: absolute; left: -500px;) but that is no different than loading it where you want it and setting it to display: none. Plus, you would have to move it before showing it.

I think the first suggestion in your second paragraph is what you should do: load it into a div that is styled as display: none, and then simply reset the display property or fade the element in when your animation finishes.

You have it exactly right. You have to load the content into a container on the page so that the browser knows it needs to start processing it. There's nothing "wrong" with doing it that way, so don't let it bother you :)

var container = $('#myContainer');
container.hide();
container.html(ajaxResult);
container.fadeIn();

That should do it...

I believe you could even do this:

$('#myContainer').hide().html(ajaxResult).fadeIn();

Sounds like you're trying to solve a problem that doesn't need solving. The user won't care that it's 'there' somewhere, and since you show it soon anyhow, you've no need to 'obscure' it. That said, if you use .ajax() instead of .load() you will have full control of the returned data; you do not need to add it to the DOM until you want to. Once it's in the DOM, you can use .detach() to remove it without destroying it if you need it again later.

Not sure I understood correctly, but you can do something like:

start_animation();
$.get('url', function(response) { stop_animation_and_show_content(response); });

function stop_animation_and_show_content(html) {
    // ...
}