CODEWITHSUNDEEP
jqueryajax
Ricardo
Ricardo

Reputation: 1672

'Loading' div before the entire website is loaded

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.

Upvotes: 0

Views: 1785

Answers (2)

jbrookover
jbrookover

Reputation: 5150

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.

Upvotes: 3

user915495
user915495

Reputation:

I usually use the following method: place 2 divs: one container and one loading div. The loading div should have position:fixed in the css and made so it occupies 100% width and height.

On load, I would add:

$("#container").load(url, myFunction);

where "url" is a path to an HTML fragment (not a complete page) that should be injected into the container div. myFunction is a function pointer that should contain something like this:

$("#loading").fadeOut(500);

Which fades out the loading div for 500 ms.

Make sure you call $(document).load() instead of $(document).ready(), since ready will fire before images are loaded.

Upvotes: 0

Related Questions