Question

i am downloading images in each iteration. so logic & code is there in each iterator which download image one by one. i want that when all images download gets completed then immediately i want to call a function which notify user that all images download complete.
please guide me to modify my existing code.

here is my code

$(document).ready(function () {
$("table[id*=dgImages] img").each(function () {
if($(this).offset().top > $(window).scrollTop() && $(this).offset().top < $(window).scrollTop() + $(window).height()) {


$(this).attr("src", $(this).attr("original"));
$(this).removeAttr("original");
}
});
});

Answer 1

jQuery deferred objects to the rescue:

var def = [];                  // an array to store deferred objects

$('img').each(function() {     // for each image
   var d = $.Deferred();       // create a new deferred object
   def.push(d);                // store it in the array for later
   $(this).load(d.resolve);    // and on load, "resolve" it
});

$.when.apply($, def)           // $.when(def[0], def[1], ...);
.then(function() {             // are all resolved, then
    alert("all loaded!");      // do your stuff here
});