JavaScript懒加载_图片延迟加载

图片延迟加载通过 Intersection Observer 监听元素进入视口，将 data-src 赋值给 src 实现按需加载，提升性能。

图片延迟加载（Lazy Loading）是一种优化网页性能的技术，它让图片在用户滚动到其位置时才开始加载，而不是页面一打开就加载所有图片。这种技术能显著减少初始页面加载时间、降低带宽消耗，提升用户体验，尤其适用于图片较多的长页面。

实现原理

懒加载的核心思想是：将 img 标签的 src 属性暂时移除或替换为占位图，把真实的图片地址存放在自定义属性中（如 data-src）。当图片元素进入视口（可视区域）时，再将 data-src 的值赋给 src，触发图片加载。

• 用 data-src 存储真实图片路径
• 监听页面滚动或使用 Intersection Observer API
• 检测哪些图片进入可视区域
• 动态设置 src 加载图片
• 加载完成后可解绑事件或标记状态防止重复加载

使用 Intersection Observer 实现（推荐）

现代浏览器推荐使用 Intersection Observer，它比传统的监听 scroll 事件更高效，不会造成频繁重排重绘。

示例代码：

立即学习“Java免费学习笔记（深入）”；

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

const imageObserver = 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 => {
  imageObserver.observe(img);
});

HTML 结构示例：

延迟加载图片插件Lazy Load XT

延迟加载图片插件Lazy Load XT

21

查看详情

<img  alt="示例图片" />

兼容性处理与降级方案

如果需要支持较老的浏览器（如 IE），可以结合 scroll 事件监听作为降级方案，或者引入 polyfill。

简单降级方法：

• 通过 getBoundingClientRect() 判断元素是否进入视口
• 绑定 scroll 事件并做节流处理，避免频繁触发
• 加载完成后移除监听或更新状态

优化建议

• 给图片预留尺寸（设置 width 和 height），防止加载时页面跳动
• 配合模糊占位图（blurry placeholder）提升视觉体验
• 加载失败时显示默认图或错误提示
• 考虑使用原生 loading="lazy" 属性作为最简方案

现代浏览器已支持原生懒加载：

<img src="image.jpg" loading="lazy" alt="图片" />

这种方式无需 JavaScript，但兼容性需注意（不支持 IE）。

基本上就这些。根据项目需求选择合适的方式，优先推荐 Intersection Observer 或原生 lazy 属性。不复杂但容易忽略细节。

以上就是JavaScript懒加载_图片延迟加载的详细内容，更多请关注php中文网其它相关文章！