Intersection Observer 预加载图片不生效？

夏侯名哲提问于 2026-03-18 22:56:22 阅读 4

优化

我用 Intersection Observer 做图片懒加载，但有时候图片根本没触发加载，尤其是快速滚动的时候。

我试过把 rootMargin 设成 '50px'，也检查了 observer 是否正确 observe 了元素，但还是偶尔失效。这是我的核心代码：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '50px' });

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

是不是我漏了什么边界情况？比如元素一开始就在视口里会不会不触发？

预加载策略

我来解答赞 0 收藏

反馈

1 条解答

程序猿张豪 Lv1

对，元素一开始就在视口里确实不会触发。你需要初始化时手动检查一次：

const observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = entry.target;

      img.src = img.dataset.src;

      observer.unobserve(img);

    }

  });

}, { rootMargin: '50px' });



document.querySelectorAll('img[data-src]').forEach(img => {

  // 初始化时手动检查是否已在视口内

  if (img.getBoundingClientRect().top < window.innerHeight) {

    img.src = img.dataset.src; } else {

    observer.observe(img);

  }

});

或者更懒的做法：直接设置 threshold: 0，然后在页面加载完成后手动触发一次 observer：

// 页面加载后触发一次

window.addEventListener('load', () => observer.pollScroll());

其实核心问题就是：IntersectionObserver 默认只检测"从视口外进入视口"的情况，初始就在视口内的元素不会自动触发。

2026-03-18 23:00