Question

Is there any way to show a LOADING DIV while all the files (images,scripts,js files) are loaded?

Actually i think it can be done with jQuery/AJAX but I’m not sure cause i didn’t found any solution yet.

A good example would be Google Adwords (for those of you who have an account there).

My script has a lot of images and js files and some of them are pretty heavy if you ask me so i would like to show something to the user while everything loads.

NOTE: I don’t think that SetTimeout is the perfect solution cause it’s not really doing the job – it only simulate it.

Answer 1

jQuery has several methods that can handle this. I think the easiest way would be to create a <div id="loading"> and use a high z-index to cover your page. Then, use

 $(window).load(function() { 
     $('#loading').hide(); 
 });

to hide it when the document is completely loaded.

Note: This will not necessarily wait until all javascript methods have finished processing. It will trigger after images, JS files, etc are received from the server. However, if you have a heavy JS method that processes the page (e.g. wraps every word in a div and then does a complex algorithm on this), then you need to insert a callback at the end of that method that hides the loading dialog.