图片懒加载实现：让网页加载更快的小技巧

你有没有过这样的经历？打开一个旅游攻略页面，图片一张张慢慢蹦出来，等得人心急。特别是用手机在高铁站连着公共Wi-Fi查行程的时候，图还没加载完，车次信息都快错过了。其实，这种问题早就有了解决方案——图片懒加载。

什么是图片懒加载

简单来说，懒加载就是“不到时候不加载”。页面刚打开时，只加载你当前能看到的图片，那些还在屏幕下方、需要滑动才能看到的图，先放个占位符，等你快滑到那儿了，它才开始加载。这样一来，页面启动速度快，流量也省了不少。

怎么实现懒加载

现在很多网站都用 JavaScript 来实现这个功能。最常见的是利用浏览器的 Intersection Observer API，它能监听元素是否进入可视区域。比如下面这段代码：

<img data-src="beijing.jpg" class="lazy" alt="北京景点">

<script>
const lazyImages = document.querySelectorAll(".lazy");

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove("lazy");
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => {
  imageObserver.observe(img);
});
</script>

这里的关键是把真实的图片地址存在 data-src 里，而不是直接写在 src 上。等到图片快进入视野，再把 data-src 的值赋给 src，触发加载。

实际应用场景

比如你在做一份从广州到拉萨的旅行攻略，里面塞了几十张沿途风景照。如果全页加载，用户可能点开就放弃了。用了懒加载后，用户一进来就能看到前几张高原湖泊的照片，往下划时后面的布达拉宫、纳木错才陆续出现，体验顺滑多了。

有些框架比如 Vue 或 React 也有现成的懒加载组件，引入就能用。甚至不用写代码，加个属性就行，像 v-lazy 或 loading="lazy" 这样的原生支持也越来越普及。

小细节别忽略

记得给图片预留高度，不然加载过程中页面会突然跳动，容易误触。可以用 CSS 设置一个默认高宽比，比如：

.lazy {
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0;
}

这样即使图没出来，空间也留好了，页面稳当。

下次你做网页或者看攻略，留意一下图片是怎么出现的。那个“刚刚好”的加载时机，背后可能就是懒加载在默默工作。