JS图片懒加载实现方法与优化技巧

大家好，我们又见面了啊~本文《JS图片懒加载实现与优化技巧》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

图片懒加载的核心思路是延迟加载非首屏图片，待其接近视口时再加载。通过将真实图片路径存于data-src属性，初始用占位图填充src，避免布局抖动；JavaScript监听滚动或使用Intersection Observer判断图片是否进入视口，动态赋值src完成加载。为提升性能，可采用节流控制scroll事件，或优先使用Intersection Observer API实现高效监听，并设置rootMargin提前加载；针对不支持的浏览器（如IE），通过特性检测回退至scroll事件方案并可引入polyfill。合理选择技术方案可显著优化首屏加载速度与用户体验。

图片懒加载的核心思路是：页面初次加载时不加载所有图片，而是等到图片即将进入可视区域时再动态加载。这种做法能显著减少首屏加载时间，降低服务器压力。实现的关键在于判断元素是否接近视口，并用 JavaScript 动态设置 img 的 src 属性。

1. 基础原理与HTML结构

使用懒加载时，图片的真实路径不放在 src 中，而是放在自定义属性如 data-src 里。初始时可以用一张极小的占位图（比如 base64 编码的灰色图）作为 src，防止页面布局抖动。

<img class="lazy" data-src="path/to/real-image.jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="示例图片">

JavaScript 的任务就是监听滚动事件，检查哪些图片已进入或即将进入视口，然后把 data-src 的值赋给 src。

2. 核心JavaScript实现

通过 getBoundingClientRect() 判断元素位置，结合 scroll 事件触发检测。

function lazyLoad() {
  const images = document.querySelectorAll('img.lazy');
  const windowHeight = window.innerHeight;

  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    // 图片距离视口顶部小于屏幕高度即开始加载
    if (rect.top < windowHeight + 100) {
      if (img.dataset.src) {
        img.src = img.dataset.src;
        img.classList.remove('lazy'); // 防止重复处理
      }
    }
  });
}

// 初次加载和滚动时执行
window.addEventListener('load', lazyLoad);
window.addEventListener('scroll', lazyLoad);

3. 性能优化技巧

频繁触发 scroll 事件可能影响性能，需进行节流控制。同时可提前加载即将出现的图片，提升用户体验。

• 使用 throttle 节流：避免 scroll 事件过于频繁执行回调
• Intersection Observer API：现代浏览器推荐方案，性能更好，无需手动计算位置
• 预加载偏移量：设置阈值（如 100px），在图片进入视口前就加载，避免白屏

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      if (img.dataset.src) {
        img.src = img.dataset.src;
        img.classList.remove('lazy');
      }
      observer.unobserve(img); // 加载后停止监听
    }
  });
}, {
  rootMargin: '100px' // 提前100px开始加载
});

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

4. 兼容性与降级处理

IntersectionObserver 在老版本浏览器中不支持（如 IE），需要降级到 scroll + getBoundingClientRect 方案。

可通过特性检测自动选择实现方式：

if ('IntersectionObserver' in window) {
  // 使用 Observer 方式
} else {
  // 回退到 scroll 事件监听
  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('load', lazyLoad);
}

对于必须支持 IE 的项目，建议引入轻量 polyfill 或直接采用传统方法。

基本上就这些。合理使用懒加载能有效提升网页性能，关键是选择合适的技术方案并做好兼容与性能平衡。

以上就是《JS图片懒加载实现方法与优化技巧》的详细内容，更多关于js脚本制作教程的资料请关注golang学习网公众号！