图片懒加载技术真的让加载速度飞升，你对此效果满意吗？

让我们一起... 说实话，网页加载速度这事儿，咱就是说真的很重要。

你想啊， 当你满怀期待地点开一个网页，后来啊迎接你的是一大片惨白的空白框， 从一个旁观者的角度看... 还有那个仿佛永远在转圈的加载图标，你什么感觉？

哈哈，是不是很抓狂？

这事儿我可太有发言权了。 这时候，懒加载这位“聪明服务员”就该登场了。

懒加载的前世今生

那必须的！ 回顾一下前端图片加载优化的历史，简直就是一部开发者从“苦力”进化成“指挥家”的血泪史。

最开始， 我们像原始人一样，手动计算每一个像素的位置，监听每一次滚动， 完善一下。 生怕漏掉一张图片，代码写得又臭又长，性能还差强人意。

那时候，我们是在和浏览器搏斗。

后来IntersectionObserver出现了我们学会了“自动驾驶”，太顶了。。

事实上... 我们开始学会指挥浏览器去干活，自己则退居幕后只负责处理核心的业务逻辑。

懒加载的原理

懒加载的思路其实非常简单粗暴且有效：只有当元素出现在用户的可视区域内时才去请求并加载对应的资源。

这就像是你只为你眼前的东西买单，既省钱又省心。

对于用户 首屏加载速度变快了滚动起来也更流畅；对于服务器压力减轻了带宽也省了，哭笑不得。。

这简直就是双赢的局面对吧？

实现懒加载

要实现这个功能， 我们得搞清楚几个关键的数据点：视口高度、元素位置和触发条件，整起来。。

完善一下。 视口高度也就是用户屏幕的高度，我们可以通过window.innerHeight拿到。

元素位置我们需要知道图片距离视口顶部还有多远，这时候getBoundingClientRect这个API就成了我们的好帮手。