How to check if all the images are downloaded using jquery?

Question

I am creating a simple animation of images in my application. There are multiple images in the document. I want that when the page loads the images should start to animate. I tried with this:

$(document).ready(function(){

 $(".slide").animate({
    left:'250px',
    opacity:'0.3',
  });

});

On my local server I get the desired effect since all the images are loaded instantly but when I run the same code on hosted server I do not get the desired effect. The image that loads first in sequence starts to animate while others animate as they loaded.

I want to all images to animate in parallel rather than serially. Can anyone tell me how do I ensure that images are loaded so that I can then animate all of them?

possible duplicate of [JavaScript/jQuery event listener on image load for all browsers](http://stackoverflow.com/questions/7442821/javascript-jquery-event-listener-on-image-load-for-all-browsers) — Nano, Jun 14 '14 at 08:47

score 0 · Answer 1 · answered Jun 14 '14 at 06:34

If all your images are in the HTML of the document (none created dynamically), then you can simply switch to use $(window).load() which will not fire until all images in the page have finished loading:

$(window).load(function(){

 $(".slide").animate({
    left:'250px',
    opacity:'0.3',
  });

});

score 0 · Accepted Answer · answered Jun 14 '14 at 06:34

Simply change $(document).ready() function to $(window).load function as:

$(window).load(function() {

     $(".slide").animate({
        left:'250px',
        opacity:'0.3',
      });
});

The reason behind doing so is that ready event is fired when DOM elements are ready to be manipulated irrespective whether content inside them such as images, videos etc are downloaded or not where load event is fired when all the content has been downloaded as well in DOM elements.

score 0 · Answer 3 · answered Jun 14 '14 at 06:35

Exactly, the dom ready status means all the essential stuff is loaded and the page is ready to be interacted with. Images continue to load in the background.

What you need is the window.onload event:

$( window ).load(function() {

 $(".slide").animate({
    left:'250px',
    opacity:'0.3',
  });

});

How to check if all the images are downloaded using jquery?

3 Answers3