jqueryimagesloaded

imagesloaded from image array


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?


Solution

  • 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);
    });