ImagesLoaded.js 不適用於 Isotope 和 LazySizes

Question

我很抱歉，如果有一個答案在那里，請點我朝着正確的重復，如果這樣。

• 同位素： https : //isotope.metafizzy.co
• 圖片加載： https ://imagesloaded.desandro.com/
• LazySizes： https : //github.com/aFarkas/lazysizes

我正在嘗試構建一個迷你畫廊，它使用lazysizes 進行延遲加載，使用同位素進行排序，並在加載延遲圖像時使用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有問題。

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