Question

i got a code which can be used to notify user when all images download complete but the flow of the code is not very clear to me. can anyone explain please in detail.

what one() function and what it does…how load() function is calling

here is the code

$("#loadingDiv").show();
var nImages = $("#all-images").length;
var loadCounter = 0;

$("#all-images img").one("load", function() {
loadCounter++;
if(nImages == loadCounter) {
    $(this).parent().show();
    $("#loadingDiv").hide();
}
}).each(function() {

// attempt to defeat cases where load event does not fire
// on cached images
if(this.complete) $(this).trigger("load");
});

thanks

Answer 1

.one(event, handler) sets a block of code to be executed on the given event at most once. It means, if you have something like $("#someid").one(click, function(){blabla; more_blabla;});, it will fire only the first time you click on someid element.

Reference

EDIT: This question has sort of explanation of the code. jQuery loading images with complete callback

Basically, you are loading one or more image objects in your page. The $("#all-images img").one… binds a event handler (a block of code that runs when event do happens) to all the images being loaded… the code will execute ONCE and ONLY ONCE for each one of them.

Later, there’s a .each that just runs all over the "#all-images img" elements selected and.. the pointer this just points (heh) to the objects being loaded (the images) and the attribute complete tells if the loading is complete or not. So, that last piece of code looks for images already loaded in order to bind to them the event handler on aaaalll of them them (because the initial binding just takes into account images being loaded from server, I guess.)

Hope I was clear enough