More efficient way to wait for all images to load in jQuery

Question

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?

Possible duplicate http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin — asymptoticFault, Aug 13 '13 at 19:28
Dup: [Official way to ask jQuery wait for all images to load before executing something](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin?rq=1) (See second answer) — Izkata, Aug 13 '13 at 19:28
@asymptoticFault I'm asking to execute **once**, not the same as http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin which is just asking to execute (multiple times) on load. — Kyle Yeo, Aug 13 '13 at 19:29
@Izkata Will look at the 2nd answer to see if its what I need, thanks — Kyle Yeo, Aug 13 '13 at 19:32
The linked answer does only execute once when all images have loaded. — asymptoticFault, Aug 13 '13 at 19:32
@asymptoticFault right, will see if it works, if it does i'll delete the thread. — Kyle Yeo, Aug 13 '13 at 19:34
@asymptoticFault last note before i flag for a delete -- it does. changed the script to `(function($) {$(window).load(function(){//Code Here});})(jQuery);` — Kyle Yeo, Aug 13 '13 at 19:40

score 4 · Answer 1 · answered Aug 13 '13 at 19:29

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
        }
    });
});

score 1 · Answer 2 · answered Aug 13 '13 at 19:32

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.

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

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

edited May 23 '17 at 12:15

Community

1
1

answered Aug 13 '13 at 19:48

Kyle Yeo

2,270
5
31
53

More efficient way to wait for all images to load in jQuery

3 Answers3