desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"

Home Page:https://imagesloaded.desandro.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Possible bug with makeArray helper function in 5.0.0

lordmatt opened this issue · comments

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

👍