How to run a jQuery Code after loading all the images in my page?

Question

How to run a jQuery Code after loading all the images in my page ?

Answer 1

Checking to see that all images have loaded is slightly involved, so unless you have a pressing need to be so precise, it is much easier to check that all image and everything else has loaded:

$(window).load(function() { ... });

This makes use of the jQuery .load() method.

If you do really need to check for specifically only images, then things get a little trickier. I initially wanted to do this:

$("img").load(function() { ... }); \\ THIS IS INCORRECT!!!!!

However the above creates a jQuery object that contains all images, and then it binds function() { ... } to each of these images. So the above will trigger a function as many times as there are images on the page!

To get around this, we should check how many images there are on the page, and only fire the function once after all those images have been loaded:

$(function() {  

      // To keep track of how many images have loaded
    var loaded = 0;

      // Let's retrieve how many images there are
    var numImages = $("img").length;

      // Let's bind a function to the loading of EACH image
    $("img").load(function() {

          // One more image has loaded
        ++loaded;

          // Only if ALL the images have loaded
        if (loaded === numImages) {

              // This will be executed ONCE after all images are loaded.
            function() { ... }   
        }
    });
});

jsFiddle example

Answer 2

$(window).load(function(){})