交叉点观察器在轮播（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);
  });
},

希望对您有帮助！