imagesloaded from image array

Question

I am using imagesloaded and jquery, see the code below.

var img = new Image();

img.src = 'abc.jpg',
          'def.jpg';

var imgLoad = imagesLoaded(img);

imgLoad.on( 'progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

It only checks abc.jpg (the first image specified in the source). The second image is not being checked by the code. How can I check all images in img.src?

Answer 1

The ImageLoaded Constructor takes an array of images, try to put your pictures in an array instead of settings multiple sources for a single image. I haven't tested it but your code should look like this:

image_names = ['abc.jpg', 'def.jpg'];
images_array = [];
var i;
for (i = 0; i < image_names.lenght; i++) {
    var img = new Image();
    img.src = image_names[i];
    images_array[i] = img;
}

var imgLoad = imagesLoaded(images_array);

imgLoad.on('progress', function (instance, image) {
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log('image is ' + result + ' for ' + image.img.src);
});