Jquery - Show "Loading..." until all images load

The site I’m making looks particularly bad for a few seconds as you enter, until the background image loads up.

I’m wondering how could I use Jquery to show a simple “Loading…” on the screen until all the images are loaded.


var loader = jQuery('<div>Loading...</div>');

jQuery(document).ready(function(){
    loader.prependTo('body');
});

jQuery(window).load(function(){
    loader.remove();
});

Thanks for the try, but what I want is to hide the body until all the images are loaded while showing the loading div you created. and then, once all the images are loaded show the body.

I have changed your script a bit, and with the following I am able to hide the body until all the images are loaded. However, the prependto window does not work and the loader does not show. I can’t figure out how to solve this.

var loader = jQuery('<div id="loadingdiv">Loading...</div>');

jQuery(document).ready(function(){
    $('body').hide();
    loader.prependTo(window);
});

jQuery(window).load(function(){
    loader.remove();
	$('body').show();
});

Ok. I’ve given up on the hidding the body completely. I think I’ll just try to preload the background image and use your script.

However, I’ve seen the loading div takes 5 or 6 seconds to show, and before it does part of the images and text are already showing on the screen for a while. Is this because of the document ready function?

I tried removing the document ready function, but then, the loading div never shows at all.

You should focus on making the site load faster, and look better while it progressively loads. Personally, and I know I’m not alone, those “loading” signs really annoy me. I think most people would rather be able to read the text and start using the webpage, even if it’s ugly for a short time, than to be forced to wait.

If you don’t want to wait for the jquery ready event(probably too long in your case), then just put the script immediately after the body tag in the html.

If you aren’t using jquery for other stuff on the page, you’re just further slowing things down by having to load that library for such a simple thing.