如果有答案,我深表歉意。如果可以,请指出正确的答案。
同位素:https://isotope.metafizzy.co
已加载图片:https://imagesloaded.desandro.com/
LazySizes: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似乎有问题。 最佳答案
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);
关于javascript - ImagesLoaded.js不适用于同位素和LazySizes,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53231933/