当前位置：首页 > 文章列表 > 文章 > 前端 > IntersectionObserver懒加载实现教程

IntersectionObserver懒加载实现教程

2025-06-30 09:36:14 0浏览收藏

从现在开始，努力学习吧！本文《IntersectionObserver实现懒加载教程》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

图片懒加载的核心实现依赖于IntersectionObserver API，通过监听图片是否进入视口触发加载。具体步骤如下：1. 使用IntersectionObserver监听带有data-src属性的图片元素；2. 当图片进入视口时，将真实src替换占位符，并停止观察以避免重复加载；3. 选择低分辨率模糊图作为占位符提升体验；4. 设置onerror处理加载失败情况；5. 必要时对回调进行节流或防抖优化性能；6. 对老旧浏览器使用polyfill兼容处理；7. 根据业务需求合理设置threshold阈值，控制加载时机；8. 动态添加图片时可通过MutationObserver自动监听，或手动调用observe方法。代码简洁且高效，兼顾用户体验与性能优化。

怎么用IntersectionObserver实现懒加载？

核心在于利用IntersectionObserver API 监听图片元素是否进入视口，一旦进入，就加载真实图片，替换占位符。这比传统的scroll事件监听性能更高，也更优雅。

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src'); // 避免重复加载
      observer.unobserve(img); // 停止观察已加载的图片
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

代码片段如上，简洁明了。但实际应用中，可能还会遇到一些问题。

实现图片懒加载的最佳实践

占位图的选择： 使用低分辨率的模糊图片作为占位符，或者使用纯色背景。这能避免页面加载初期出现大面积的空白，提升用户体验。我个人更倾向于模糊的低分辨率图片，能更好地预览图片内容。
错误处理： 图片加载失败的情况也需要考虑。可以设置一个默认的错误图片，或者显示一段友好的提示信息。例如：
```
img.onerror = () => {
  img.src = 'default-error.jpg';
  img.alt = '图片加载失败';
};
```
节流与防抖： 虽然IntersectionObserver本身性能很好，但如果页面上有大量的图片，频繁的触发回调函数仍然可能影响性能。可以考虑对回调函数进行节流或防抖处理。但我通常觉得，如果IntersectionObserver都hold不住了，那说明页面结构或者图片数量本身就有问题，需要从源头优化。
兼容性处理： 虽然IntersectionObserver的兼容性已经很好了，但仍然需要考虑一些老旧浏览器。可以使用polyfill或者回退到传统的scroll事件监听方案。不过现在，我基本都直接忽略这些老旧浏览器了，毕竟技术是不断进步的。
结合CDN加速： 使用CDN加速图片加载，可以显著提升加载速度。这是个老生常谈的问题，但仍然非常重要。

IntersectionObserver的阈值(threshold)如何设置？

IntersectionObserver的threshold选项决定了元素与视口交叉的比例达到多少时，触发回调函数。默认值为0，表示只要元素有一点点进入视口就触发。

threshold: 0: 这是最常用的设置，也是默认值。只要目标元素有一像素进入视口，就会触发回调。适用于大多数懒加载场景。
threshold: 0.5: 当目标元素一半进入视口时，触发回调。适用于希望提前加载图片的场景，例如，用户还没看到图片，但已经滚动到附近了，就可以提前加载。
threshold: 1: 只有当目标元素完全进入视口时，才触发回调。适用于需要元素完全可见才能执行某些操作的场景，例如，统计曝光量。
数组形式： 可以设置多个阈值，例如threshold: [0, 0.25, 0.5, 0.75, 1]。这样，当元素进入视口的比例达到这些值时，都会触发回调。这可以用来实现一些更复杂的效果，例如，根据元素进入视口的比例，动态调整元素的样式。

选择合适的阈值取决于具体的业务需求。我通常会根据用户的网络环境和设备性能，动态调整阈值。例如，在网络环境较差的情况下，可以适当提高阈值，减少不必要的加载。

如何处理动态添加的图片？

动态添加的图片无法在初始化时被querySelectorAll选中，因此需要手动将它们添加到IntersectionObserver的观察列表中。

监听DOM变化： 使用MutationObserver监听DOM变化，当有新的图片元素被添加到页面时，将其添加到IntersectionObserver的观察列表中。

const mutationObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      mutation.addedNodes.forEach(node => {
        if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'IMG' && node.dataset.src) {
          observer.observe(node);
        }
      });
    }
  });
});

mutationObserver.observe(document.body, {
  childList: true,
  subtree: true
});

手动添加： 在动态添加图片后，立即调用observer.observe(newImg)将其添加到观察列表中。

封装成函数： 将添加图片到观察列表的操作封装成一个函数，方便调用。

function observeImage(img) {
  if (img && img.tagName === 'IMG' && img.dataset.src) {
    observer.observe(img);
  }
}

// 动态添加图片后
const newImg = document.createElement('img');
newImg.dataset.src = 'new-image.jpg';
document.body.appendChild(newImg);
observeImage(newImg);

我个人更倾向于使用MutationObserver，因为它能自动处理所有动态添加的图片，无需手动调用。但是，需要注意MutationObserver的性能，避免过度监听。

到这里，我们也就讲完了《IntersectionObserver懒加载实现教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于懒加载的知识点！

懒加载