谁让你加载这么慢的，用户都不一定看得到你就搁那���载。大大拖慢页面展示速度，还浪费用户流量，老老实实去先去script里面待着，等页面出来了再叫你。

这里的“你”指的就是图片

我们在打开一个网页时，有时候会有很多图片需要加载，为了提高网页加载速度，我们有个方法就是让我们暂时看不到的图片先不下载，它被称为图片懒加载。

举个例子

你会注意到，平常看网页时只要你滚轮滑的够快，你会发现下面的图片还只是一个框，需要过一小会时间才能显示出来，这就是图片懒加载的效果。当然，我们要的并不是这个效果，而是为了这个页面打开时不用一下将所有图片下载好来，先将主页面的下载就好，然后当用户往下划时，再加载用户即将看到的图片。那我们该怎么实现呢？

图片懒加载的工作原理

• 改个属性名：将传统的 src 属性替换为 data-src，阻止图片在页面加载时自动下载。
• 进script里面待着：利用JavaScript监听页面滚动事件，计算图片距离视口的位置。当图片接近或进入可视区域时，通过脚本动态将data-src的值赋给src，触发图片加载。

几个关键点

• 首屏优先：确保首屏内容中的图片正常加载，快速展示给用户。
• 滚动事件：添加监听滚动事件，当用户往下划时，给图片下载的指令。
• 终止监听事件：当所有图片都加载出来了，就不再需要这个监听事件了，将它移除。

进入实战

既然了解了图片懒加载，那么我们进入实战

主要代码：

const throttleLayLoad = _.throttle(loadImage, 200)

也许有人会对这段代码有疑问，也就是倒数第四行代码，我们称它为节流，这也是一个需要注意的地方。scroll是很敏感的，当用户滚动滑轮时，监听事件不停地在触发，这也是降低性能的一个因素，所以我们需要抑制它的频率，这段代码的作用就是让 loadImage()方法每200毫秒只会执行一次，大幅减少了性能损耗。

引入的CSS：

以上代码就实现了一个简易的图片懒加载。

结语

网页加载速度直接影响着用户体验，而程序员的天职就是提升用户的体验，所以了解如何提升页面性能是至关重要的，这也是面试官常常会提到的话题。