I'm using a mix of .ready() and .load() to execute my desired function.

jQuery(document).ready(function($) {
    $("img").load(function() {
        // Function goes here
    });
});

As you can see, this waits for the DOM to be ready, then on each <img> load, it executes the code.

If I only had one image to load this would be simple.

But the problem is -- what if I have 10 images to be loaded? The function will be called 10 times due to each image loading one by one, and that's not a very efficient way to go about it just to achieve what I want.

So here's the question -- is there a more efficient way to wait for all images to load, then execute the function once?

I'm using a mix of .ready() and .load() to execute my desired function.

jQuery(document).ready(function($) {
    $("img").load(function() {
        // Function goes here
    });
});

As you can see, this waits for the DOM to be ready, then on each <img> load, it executes the code.

If I only had one image to load this would be simple.

But the problem is -- what if I have 10 images to be loaded? The function will be called 10 times due to each image loading one by one, and that's not a very efficient way to go about it just to achieve what I want.

So here's the question -- is there a more efficient way to wait for all images to load, then execute the function once?

• javascript
• jquery
• image
• dom

• 1 Possible duplicate stackoverflow./questions/544993/… – asymptoticFault Commented Aug 13, 2013 at 19:28
• 1 Dup: Official way to ask jQuery wait for all images to load before executing something (See second answer) – Izkata Commented Aug 13, 2013 at 19:28
• @asymptoticFault I'm asking to execute once, not the same as stackoverflow./questions/544993/… which is just asking to execute (multiple times) on load. – Kyle Yeo Commented Aug 13, 2013 at 19:29
• @Izkata Will look at the 2nd answer to see if its what I need, thanks – Kyle Yeo Commented Aug 13, 2013 at 19:32
• The linked answer does only execute once when all images have loaded. – asymptoticFault Commented Aug 13, 2013 at 19:32

3 Answers 3

You could do something like this to avoid having your function run multiple times.

jQuery(document).ready(function($) {
    var nrOfImages = $("img").length;
    $("img").load(function() {
        if(--nrOfImages == 0)
        {
            // Function goes here
        }
    });
});

jQuery(window).load(function() {
    alert("page finished loading now.");
});

jQuery(window).load(...) will be triggered after all content on the page has been loaded. This different from jQuery(document).load(...) which is triggered after the DOM has been loaded. I think this will solve your issue.

If anybody wants to know, my final result was this:

(function($) {
    $(window).load(function(){
        // Function goes here
    });
})(jQuery);

that's because

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

isn't a jQuery object, as referenced in this question:

Calling jQuery on (window).load and passing variable for 'No Conflict' code