Load gif until full page load

Question

I'm using this for my site to display a loading gif until my page is loaded.

It's kinda working.

$(window).load(function(){
    $('#overlay').fadeOut();
});

The HTML:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

But, the gif disappears to soon. My images aren't fully loaded yet when the loading gif disappears. How do I have to edit this code so it will show the loading gif until EVERYTHING is loaded on my page?

Answer 1

Like Arijit said, you can set a timer on the fadeOut() function

DEMO

---

Or to show a .gif loader until image(s) are ready use this:

$(window).onbeforeload(function(){
//..Your code here..
});

Once the page is loaded and window is ready use this:

$(window).load(function(){
//..Your code here..
});

The load event will only trigger when the page is fully loaded, not just the DOM of the page.

You can also use image placeholders onbeforeload so it only shows placeholders instead of the image(s).

Once image(s) is loaded, placeholders will be replaced with the actual image(s).

---

My last alternative for you could be this plugin instead. ImagesLoaded

Good Luck!