ImagesLoaded.js不适用于同位素和LazySizes

Question

如果是的话，我很抱歉，如果是的话，请告诉我正确的副本。

• 同位素：https://isotope.metafizzy.co
• ImagesLoaded：https://imagesloaded.desandro.com/
• LazySizes：https://github.com/aFarkas/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);