交叉路口观察者在轮播后“卸载”图像（Siema）

Question

我有这个fiddle 来显示我的问题。

我已经为延迟加载图片做了一个交叉点观察器，代码：

const images = document.querySelectorAll("[data-src]");

function preloadImage(img){
    const src = img.getAttribute("data-src");
    if (!src) { return; }
    img.src= src;
}

const imgOptions = {
    threshold: 0,
    rootMargin: "0px 0px 300px 0px"
};

const imgObserver = new IntersectionObserver( (entries, imgObserver) => {
    entries.forEach(entry => {
        if(!entry.isIntersecting){
            return;
        } else {
            preloadImage(entry.target);
            imgObserver.unobserve(entry.target);
        }
    })
}, imgOptions);

images.forEach( image => {
    imgObserver.observe(image);
});

当我循环通过 Siema 轮播时出现问题，最后一张和第一张图像“卸载”，意思是 src 返回到 data-src，尽管它在相交后被告知 unobserve。

要查看问题，只需单击小提琴中的“上一个”。第一张图片会消失，但它已经加载了。

为什么会这样，我做错了什么？

编辑： Fixed working fiddle，谢谢@ohladkov

Answer 1

这是因为这个值：loop: 1。在const images = document.querySelectorAll ("[data-src]")中加载页面时只有6张图片，而当你初始化滑块时，它有10张图片。当滑块初始化时，您需要获取图像并调用您的观察者。 Siema 有一个 onInit 回调。 类似的东西：

onInit() {
  const el = document.querySelector(this.config.selector); // get siema container
  const images = el.querySelectorAll("[data-src]"); // get all siema images

  images.forEach( image => {
    imgObserver.observe(image);
  });
},

希望对你有帮助！