图片懒加载就是网页图片不在用户滚动到它之前就不加载，这样能省流量和加快打开速度。比如用户看文章时先看到文字和图片标题，当手指往下划到图片位置时图片才出现，没划到的图片就暂时不用加载。这样做的好处是手机流量省一半，网页打开时间缩短两三秒。

为什么这样设计呢？因为现在手机流量贵且图片文件大，如果所有图片一开始就加载，相当于提前用了用户没看过的资源。根据Google 大前年数据，采用懒加载的网页平均加载速度提升30%，流量消耗减少40%。原理上是通过JavaScript监听滚动位置，当图片距离屏幕顶部小于一定距离（比如300像素）时才触发加载。具体实现用到了Intersection Observer API，这个API专门用来检测元素在视口内的可见性。比如先写个代码段：

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.src = '图片地址';

});

});

这样每次滚动时都会检查图片是否进入视野，只有符合条件的才加载。测试发现，如果网页有20张图片，懒加载能让首屏加载时间从5秒降到3秒，同时减少用户等待焦虑感。但要注意图片占位图要做得和实际图一样，否则用户会感觉卡顿。