ImagesLoaded.js 不适用于 Isotope 和 LazySizes答案

【问题标题】：ImagesLoaded.js won't work with Isotope and LazySizesImagesLoaded.js 不适用于 Isotope 和 LazySizes
【发布时间】：2018-11-09 19:10:02
【问题描述】：

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

同位素：https://isotope.metafizzy.co
已加载图像：https://imagesloaded.desandro.com/
懒惰尺寸：https://github.com/aFarkas/lazysizes

我正在尝试构建一个迷你画廊，它使用lazysizes 进行延迟加载，使用isotope 进行排序，并在加载延迟图像时使用imagesLoaded 重新排列布局。

由于某种原因，我的 imagesLoaded 函数不会更新 Isotope，但如果我记录事件然后手动运行 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 有问题。

【问题讨论】：

标签： javascript webpack lazy-loading jquery-isotope imagesloaded

【解决方案1】：

imagesLoaded documentation 具有误导性，不能在原生 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);

【讨论】：