图片懒加载实现：让网页加载更轻快

你有没有遇到过这种情况？打开一个图文并茂的网页，页面还没看完，手机流量却已经见底。尤其在地铁里刷网页，图片一张张慢悠悠地“蹦”出来，卡得人直跺脚。其实，这背后可能就是图片加载策略没做好。而“图片懒加载”正是解决这个问题的实用技巧。

什么是图片懒加载

简单说，懒加载就是“不着急”。网页刚打开时，那些还在屏幕外、用户暂时看不到的图片先不加载，等到用户往下滚动，快要看到那张图了，再让它出现。这样一来，首屏加载更快，流量也省了不少。

为什么需要它

想象一下，一个商品列表页有上百张图，每张都几 MB。如果一次性全加载，用户等得花儿都谢了。而用了懒加载，只加载当前可视区域附近的图片，体验立马顺滑起来。对移动端用户来说，这简直是救命稻草。

怎么动手实现

实现方式有多种，最常见的是利用 Intersection Observer API。它能监听元素是否进入视口，比老式的 scroll 事件监听更高效，不会拖慢页面。

<img data-src="image1.jpg" class="lazy" alt="示例图片">
<img data-src="image2.jpg" class="lazy" alt="另一张图片">

注意这里用了 data-src 而不是直接写 src，目的是防止图片提前加载。真正的加载由 JavaScript 控制：

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);
});

这段代码的意思是：找出所有带 .lazy 的图片，当它们进入视口时，把 data-src 的地址赋给 src，图片就正式加载了，然后停止监听这张图。

兼容性处理

老版本浏览器比如 IE 不支持 Intersection Observer，这时候可以降级使用 scroll + getBoundingClientRect() 来判断位置，虽然性能差点，但至少能用。

别忘了加个占位

直接留白会让页面跳动，用户体验差。建议给图片设置固定宽高，或者用灰色块、模糊缩略图做占位，等真实图片加载完成再替换，视觉上会平稳很多。

懒加载不只是技术细节，更是对用户耐心的尊重。下次你发现网页加载慢，不妨看看是不是图片没做懒加载。改一改，效果立竿见影。