Question

I am using this code for to call function after the images are loaded

var height = 0;
$("#right-layout-ul li img").on("load",function(){
     function_function();    
});

If i am refreshing the page the function does not call because the images are already loaded…

Is there any way to find the status of the image like loaded or loading ?

I want to call a function after the image loaded,if the images are loaded also call the function…

how to implement ??? please help me

Answer 1

var $images = $("#right-layout-ul li img")
, imageCount = $images.length
, counter = 0;

// one instead of on, because it need only fire once per image
$images.one("load",function(){

     // increment counter everytime an image finishes loading
     counter++;
     if (counter == imageCount) {

         // do stuff when all have loaded
         function_function();   
     } 
}).each(function () {
    if (this.complete) {

        // manually trigger load event in
        // event of a cache pull
        $(this).trigger("load");
    }
});