为什么我的图片懒加载在滚动到底部时会重复加载？

子荧 Dev 提问于 2026-02-04 15:12:30 阅读 29

交互

我在做一个图片列表页用懒加载，用Intersection Observer监听，但滚动到页面最底部时，图片会重复触发加载两次。之前试过把阈值改成0.1和调整根边距都不行，控制台还报错说”Cannot read properties of undefined (reading ‘src’)”。

代码是这样的：observer.observe(document.querySelectorAll('.lazy-img'))，然后回调里用entries.forEach(entry => { if (entry.isIntersecting) { ... }}。但发现当最后一个元素出现时，回调执行了两次，导致重复请求和错误。


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

document.querySelectorAll('.lazy-img').forEach(img => observer.observe(img));

我来解答赞 11 收藏

反馈

1 条解答

♫瑞丽 Lv1

Intersection Observer回调触发多次是常见问题，你的判断条件不够严谨导致重复执行。加个 !entry.target.src 判断再执行加载，重复触发问题就解决了。

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

  entries.forEach(entry => {

    if (entry.isIntersecting && !entry.target.src) {

      entry.target.src = entry.target.dataset.src;

      observer.unobserve(entry.target);

    }

  });

}, { rootMargin: '0px', threshold: 1.0 });



document.querySelectorAll('.lazy-img').forEach(img => observer.observe(img));

2026-02-04 15:18