JavaScript懒加载技巧全解析

大家好，今天本人给大家带来文章《JavaScript懒加载实现方法详解》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

Intersection Observer API能高效实现懒加载。它异步监听元素与视口的交叉状态，相比scroll事件更流畅，不阻塞主线程。通过观察img元素，当进入视口时将data-src赋值给src，并停止监听，可提升性能。配置rootMargin可提前加载，threshold控制触发比例，需注意兼容性及及时解绑观察器。

懒加载图片或内容能提升页面性能，Intersection Observer API 提供了一种高效监听元素是否进入视口的方式。相比传统的 scroll 事件加 getBoundingClientRect 计算，它更流畅、性能更好。

什么是 Intersection Observer API

Intersection Observer 是浏览器原生提供的 API，用于异步检测目标元素与视口的交叉状态。当某个元素进入或离开可视区域时，会触发回调函数，适合用来实现懒加载。

它的优势在于不占用主线程，不会频繁触发重排或重绘，比手动监听 scroll 事件更加高效。

基本用法：实现图片懒加载

将需要懒加载的图片的 src 放在 data-src 属性中，初始使用占位图或空白。当图片进入视口时，再将 data-src 赋值给 src。

// HTML 示例

// JavaScript 实现
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img); // 加载后停止监听
    }
  });
});

// 开始观察所有带 .lazy 类的图片
document.querySelectorAll('.lazy').forEach(img => {
  observer.observe(img);
});

优化配置项

创建 IntersectionObserver 时可以传入第二个参数配置对象，控制触发时机。

• root：指定根容器，默认是浏览器视口
• rootMargin：扩展或收缩触发区域，如 '50px' 表示提前 50 像素加载
• threshold：交叉比例，0.1 表示 10% 可见时触发，0 表示一进入就触发

例如，想让图片在距离视口还有 100px 时就开始加载：

const options = {
  rootMargin: '100px',
  threshold: 0.01
};

const observer = new IntersectionObserver(callback, options);

注意事项与兼容性

Intersection Observer 在现代浏览器中支持良好，但旧版 IE 不支持。如果需要兼容，可引入 polyfill：

https://github.com/w3c/IntersectionObserver/tree/main/polyfill

另外，记得在图片加载完成后调用 unobserve，避免重复处理和内存浪费。对于频繁出现/移除的元素，也要注意及时解绑观察器。

基本上就这些，简单又高效。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~