jQuery images preload callback in loop

Question

I am writing script for lightbox gallery. I want to user prelaod techique for elegant image loading. My current script is:

for (var i in imgs) {
    var tmp_thumb=$('img');
    tmp_thumb.on('load', function(){
        O.SG.thumbs.append('<li><a style="background-image:url(\'' + imgs[i].thumb + '\')"></a></li>');
        $(this.)remove();
    }).attr('src', imgs[i].thumb);
}

The problem is, when load callback is called, loop counter i has almost always the last value from img array.

How to pass to callback the proper value of i from the context of lode

score -1 · Answer 1 · answered Nov 21 '16 at 22:49

The problem is nothing stops your loop, you are setting a bunch of callbacks and by the time they begin getting called, the value of i has hit the end. Try using deferreds. There are examples online. Here's a pretty decent one: http://aboutcode.net/2013/01/09/load-images-with-jquery-deferred.html

jQuery images preload callback in loop

1 Answers1