ImagesLoaded.js не будет работать с Isotope и LazySizes - PullRequest
Новая
       32

ImagesLoaded.js не будет работать с Isotope и LazySizes

0 голосов
/ 09 ноября 2018

Я прошу прощения, если там есть ответ, пожалуйста, укажите мне правильный дубликат, если так.

Я пытаюсь создать мини-галерею, которая использует 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 что-то не так.

1 Ответ

0 голосов
/ 09 ноября 2018

Документация imagesLoaded вводит в заблуждение, вы не можете использовать .on в нативном JS для прослушивания событий, вы должны использовать 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);
...