desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"
https://imagesloaded.desandro.com
MIT License
8.88k stars 1.15k forks source link

Possible bug with makeArray helper function in 5.0.0 #312

Open lordmatt opened 8 months ago

lordmatt commented 8 months ago

I'm seeing the following error in the console

imagesloaded.pkgd.js:138 Uncaught TypeError: obj is not iterable
    at makeArray (imagesloaded.pkgd.js:138:34)
    at new ImagesLoaded (imagesloaded.pkgd.js:168:19)
    at $.fn.imagesLoaded (imagesloaded.pkgd.js:430:20)
    at HTMLDocument.<anonymous> ((index):713:23)
    at j (jquery.min.js:2:27295)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:28108)
    at Function.ready (jquery.min.js:2:29942)
    at HTMLDocument.J (jquery.min.js:2:30308)
makeArray   @   imagesloaded.pkgd.js:138
ImagesLoaded    @   imagesloaded.pkgd.js:168
$.fn.imagesLoaded   @   imagesloaded.pkgd.js:430
(anonymous) @   (index):713
j   @   jquery.min.js:2
fireWith    @   jquery.min.js:2
ready   @   jquery.min.js:2
J   @   jquery.min.js:2
devjennz commented 5 months ago

When you use jQuery and you get console error "obj is not iterable" or "h is not iterable" (minified version 5.0.0)

Solution:

let masonry = $( '.gallery' ).masonry();
let imgLoad = imagesLoaded( masonry[0] );
peterbrowse commented 3 months ago

If anyone has multiple masonry/isotope grids on the same page, you'll have to use something like the below to apply imageLoaded to each individual instance:

var grids = document.querySelectorAll('.grid'); grids.forEach(function(grid) { var imgLoad = imagesLoaded(grid); // Progress event listener imgLoad.on('progress', function(instance, image) { // This function is triggered each time an image is loaded var result = image.isLoaded ? 'loaded' : 'failed'; console.log('An image ' + result + ' for grid', grid); // Optionally, you can update progress indicators here }); // Completion event listener imgLoad.on('always', function() { // Code to execute after all images in this grid have loaded console.log('All images loaded for grid', grid); }); });

👍