页面加载时立即触发 IntersectionObserver 回调

Question

我是 IntersectionObserver API 的新手，我一直在试验这段代码：

let target = document.querySelector('.lazy-load');

let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
}

let observer = new IntersectionObserver(callback, options);

observer.observe(target);

function callback() {
    console.log('observer triggered.');
}

这似乎可以正常工作，每当 .lazy-load 元素进入视口时都会调用 callback()，但 callback() 也会在页面初始加载时触发一次，这会触发`console.log('observer triggered.');

是否有在页面加载时触发此回调的原因？还是我的实现方式有误？

编辑：将代码更改为以下内容仍会在页面加载时触发回调。

let target = document.querySelector('.lazy-load');

let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
}

let callback = function(entries, observer) {
    entries.forEach(entry => {

        console.log('observer triggered.');

    });
};

let observer = new IntersectionObserver(callback, options);

observer.observe(target);

Answer 1

这是默认行为。当您实例化 IntersectionObserver 的实例时，callback 将被触发。

这种情况建议提防

entries.forEach(entry => {
  if (entry.intersectionRatio > 0) {
    entry.target.classList.add('in-viewport');
  } else {
    entry.target.classList.remove('in-viewport');
  }
});

我还发现这篇文章和文档非常有用，特别是关于 IntersectionObserverEntry 的 intersectionRatio 或 isIntersecting 属性。

·https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/

·https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

·https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry

Answer 2

听起来很简单，我通过

解决了这个问题

添加阈值比较条件
为观察者的初始化添加一个轻微的延迟

    const options = {
      threshold: 1.0,
    };

      setTimeout(() => {
        observer = new IntersectionObserver(([entry]) => {
          console.log("OBSERVER TRIGGERED 1");

          if (
            entry &&
            entry.isIntersecting &&
            entry.intersectionRatio >= options.threshold
          ) {
            console.log("OBSERVER TRIGGERED 2");
          }
        }, options);

        observer.observe(observerRef.value);
      }, 2000);

我还建议临时将可观察元素的背景颜色更改为：

.observer {
  background-color: red;
}

并进行页面刷新。这样您可能会真正看到屏幕上闪烁的红色背景从而触发事件。

现在，在你向我扔西红柿之前——就我而言——我在网页上有很多视频。视频 HTML 元素不会立即“展开”，因为浏览器需要下载有关海报图像的信息。因此页面已加载，但视频仍在一个接一个地加载。添加轻微延迟解决了问题，以便浏览器有时间扩展视频内容。

页面加载时立即触发 IntersectionObserver 回调

IntersectionObserver callback firing immediately on page load

javascript

lazy-loading

intersection-observer