JavaScript - 图片懒加载

一. 为什么需要图片懒加载？

• 每一张图片都需要一个http请求获取src，如果首页有大量图片，加载时间会变长，用户体验不好。

二. 懒加载原理？有什么好处？

• 用户其实不关心屏幕看不到的地方，懒加载类似于组件的按需加载，在没用到的时候暂时不请求内容，在需要的时候再去发请求。
• 原理：在用户看不到的时候使用loading图占位，真正的图片内容等到图片处于可视范围再请求。

三. 实现

问题1：如何判断图片处于可视范围？

• 两个主要API：

Element.getBoundingClientRect()：返回元素的大小及其相对于视口的位置。
window.innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度

• 使用Element.getBoundingClientRect().top获取图片距离视窗顶部的距离。
• 使用window.innerHeight获取视窗高度。
• 判断图片是否在可视范围，只需要判断Element.getBoundingClientRect().top <= window.innerHeight

问题2：图片的src暂存的是loading图，如何获取真正的图片内容？

• 自定义data-src属性，用于存放真正的地址，当图片到了可视范围就使用真正的src替换loading图。

问题3：如何动态获取视窗变化？

• 监听浏览器的滚动条事件，触发判断是否加载的回调。

问题4：滚动时间触发太频繁，如何优化，减少重复判断？

• 对判断方法进行函数防抖。

问题5：已经加载过的图片怎么区分？（避免重复加载）

• 将已经加载过的图片从图片列表中删除。

完整代码

• 只需要给需要懒加载的图片加上lazy样式即可。