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

Question

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.

Answer 1

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!');
});

Answer 2

You could use load method for the images, like:
$('someElement img').load(function(){
//all loaded
});
Did you mean something like that