CODEWITHSUNDEEP
phpjqueryajax
Elder
Elder

Reputation: 13

jQuery: How to check if images have finished loading in ajax

I need some suggestion on how to work this around.

I have an Ajax code to execute when the LInk is clicked in my page. The ajax code is to call the PHP code to query the images(thumbnail size) filename inside a certain directory. Once executed, the ajax data will have the filenames of my thumbnails in that directory and display the thumbnails in my page dynamically.

I want to know any suggestion how to check if all thumbnails are already finished loading without using the SetTimeOut()? and execute some jquery codes once all thumbnails are loaded. I need my thumbnails to be loaded so I can set the size of my thumbnails div for scrolling.

Upvotes: 1

Views: 1655

Answers (2)

Josh Mc
Josh Mc

Reputation: 10224

Method:

function imagesLoaded(imgAr, callback){
    var 
        // This is a copy of the array of images
        imageAr = imgAr.slice(0),
        // This holds the javascript Image Objects
        images = [],
        // This is the number of Images that has loaded
        loadedCount = 0;

    var imageLoaded = function(){
        // An image has finished loading, so increment the number of images loaded by 1
        loadedCount++;
        if(loadedCount>=imageAr.length){
            // If all images have finished loading, run the 'callback' function, to report back that images have all loaded
            callback.call();
        }
    }

    // Loop around each image url
    for(var i=0;i<imageAr.length;i++){
        // For each image, create a new object
        images[i] = new Image();
        // when the image finishes loading, call the imageLoaded function
        images[i].onload = imageLoaded;
        // Assign the image the appropriate src attribute
        images[i].src = imageAr[i];
    }
}

Use:

var imageAr = ['a.jpg', 'b.jpg', 'c.jpg'];

imagesLoaded(imageAr, function(){
    alert('Images loaded!');
});

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

You could use load method for the images, like:

$('someElement img').load(function(){
  //all loaded
});

Did you mean something like that

Upvotes: 1

Related Questions