How to check if the image is loaded?

Question

with ajax i get an array of pictures URL and then I need to create from them the gallery. I also need to make a counter that shows the number of downloaded images, it looks like this:

var images;
var load_image = new Image();
load_image.onload = function(){
    myPhotoSwipe.show(0);
}
$.each(images['images'], function(key, value) { 
    load_image.src = ('index.php?load_image=' + value);
    $('#image_count').remove();
    $('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+' / '+images_array['images'].length+']</h6></div>');
    images+= '<li><a href="index.php?load_image='+value+'"><img src="index.php?load_image='+value+'" /></a></li>';
});

The problem is that the counter is always loaded at penultimate element and stay there until all images are loaded, but I need to show the load of each like a progress.

PS I also tried complete , but it didn't help.

Answer 1

You are almost there. The problem is that you are re-using the same image object. You need to create an array of load_image instances and increment your counter inside onload, when each of them returns.

            function load(){
                var imageUrls = [];
                imageUrls.push('http://www.nasa.gov/images/content/690106main_iss033e005644_full.jpg');
                imageUrls.push('http://www.nasa.gov/images/content/690669main_201209210010_full.jpg');
                imageUrls.push('http://www.nasa.gov/images/content/691806main_hs3_full_full.jpg');
                imageUrls.push('http://www.nasa.gov/images/content/689231main_Webb_Mirror_Cans_orig_full.jpg');
                var images = [];
                var i;
                var counter = 0;
                var mainDiv = document.getElementById('somediv');
                var counterDiv = document.getElementById('counter');

                for (i = 0; i < imageUrls.length; i++)
                {
                    images[i] = new Image();
                    images[i].width = 100;
                    images[i].height = 100;
                    images[i].onload = function () {
                        counter++;
                        counterDiv.innerText = counter;
                    }
                    mainDiv.appendChild(images[i]);
                    images[i].src = imageUrls[i];
                }
            }

Answer 2

This should fix it. The reason is because the load handler was being bound to only 1 image object.

var images;


$.each(images['images'], function(key, value) { 
 var load_image = new Image();

 load_image.src = ('index.php?load_image=' + value);

$('#image_count').remove();

$('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+' / '+images_array['images'].length+']</h6></div>');
images+= '<li><a href="index.php?load_image='+value+'"><img src="index.php?load_image='+value+'" /></a></li>';

load_image.onload = function(){
    myPhotoSwipe.show(0);
}

});