在旋转木马上循环后的路口观察器 "unloads" 图像 (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 轮播时出现问题，最后一张和第一张图片 "unloads"，意思是 src 返回到 data-src，尽管它被告知 unobserve相交后。

要查看问题，只需单击 fiddle 中的 'prev'。第一张图片会消失，但它已经加载了。

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

编辑： 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);
  });
},

希望对您有所帮助！

在旋转木马上循环后的路口观察器 "unloads" 图像 (Siema)

Intersection observer "unloads" images after looping on carousel (Siema)

javascript

lazy-loading

carousel

intersection-observer

siema