图片懒加载：通俗易懂版

原创于 2025-08-15 10:13:19 发布 · 227 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #性能优化

什么是图片懒加载？

想象你去图书馆看书：

普通加载：把所有书架上的书都搬到你的桌子上（不管你看不看）
懒加载：只拿你正在看的书，等你快看完时再拿下一本

图片懒加载就是：只加载用户正在看的图片，等用户快滚动到其他图片时再加载它们。

为什么要用懒加载？

好处：

网页打开更快：不用等所有图片都下载完
省流量：不下载用户看不到的图片
减轻服务器压力：减少同时请求的数量

怎么实现懒加载？

方法1：最简单的方式（现代浏览器）

<img src="占位图.jpg" data-src="真实图片.jpg" loading="lazy">

就像告诉浏览器：“先放个小占位图，等用户快看到这里时再换真图”

方法2：兼容性更好的JavaScript方式

<img class="lazy" src="占位图.jpg" data-src="真实图片.jpg">

然后加一段JS代码：

// 当用户滚动时检查哪些图片该加载了
window.addEventListener('scroll', function() {
  const lazyImages = document.querySelectorAll('img.lazy');
  
  lazyImages.forEach(img => {
    // 如果图片已经进入可视区域
    if (img.getBoundingClientRect().top < window.innerHeight) {
      img.src = img.dataset.src; // 换成真实图片
      img.classList.remove('lazy'); // 移除标记
    }
  });
});