ImagesLoaded.js 不适用于 Isotope 和 LazySize

Question

如果有答案，我深表歉意，如果有，请给我指正确的副本。

• 同位素：https://isotope.metafizzy.co
• 加载的图像：https://imagesloaded.desandro.com/
• 懒惰大小：https://github.com/aFarkas/lazysizes

我正在尝试构建一个迷你库，它使用lazysizes进行延迟加载，使用同位素进行排序，并使用imagesLoaded在加载延迟图像时回流布局。

出于某种原因，我的imagesLoaded函数不会更新同位素，但如果我记录事件，然后手动运行iso.layout()，它确实会回流布局。有什么想法吗？

import lazySizes from 'lazysizes';
const Isotope = window.Isotope = require("isotope-layout/dist/isotope.pkgd.js");
const imagesLoaded = window.imagesLoaded = require("imagesloaded/imagesloaded.pkgd.js");
//.....
document.querySelectorAll(".content-gallery .medias").forEach(element => {
const elem = element;
const iso = new Isotope(elem, {
itemSelector: ".media",
layoutMode: "fitRows",
percentPosition: true,
});
function reflow(){
iso.layout();
}
imagesLoaded(elem)
.on("progress", reflow)
.on("always", reflow)
.on("done", reflow)
.on("fail", reflow)
.on("lazyloaded", reflow)
.on("load", reflow);
});

如果我做了一个令人讨厌的setInterval()，那么同位素也会重新流动，所以ImagesLoaded似乎有问题。

Answer 1

imagesLoaded文档具有误导性，不能在本机JS中使用.on来侦听事件，必须使用element.addEventListener()。

示例：

function reflow(){
iso.layout();
}
new imagesLoaded(elem);
elem.addEventListener("progress", reflow);
elem.addEventListener("always", reflow);
elem.addEventListener("done", reflow);
elem.addEventListener("fail", reflow);
elem.addEventListener("lazyloaded", reflow);
elem.addEventListener("load", reflow);