imagesloaded
imagesloaded copied to clipboard
Possible bug with makeArray helper function in 5.0.0
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
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] );
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); }); });
👍