Question

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?

Solved. 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. 😛 As well, I knew others had a great way to do this, so I needed the best. I think I got it. Thanks, everyone.

Answer 1

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.