浅谈 lazyload 的实现原理

说道前端的性能优化，一定少不了懒加载这个名词。

---

懒加载的作用

通常情况下，打开页面会请求全部的图片资源，一方面消耗性能，另一方面在图片较多较丰富的页面中，要是一次性加载所有图片，则会影响加载速度，还会消耗大量不必要的流量。所以，这种时候懒加载则显得十分重要。接下来我来简单说说懒加载的实现原理以及实现方式。

懒加载的实现原理

在页面最开始渲染的时候，如果img没有src属性则不会去请求资源，只有设置了图片路径，才会去请求资源。懒加载的基本原理就是先使用一张占位图（通常是一个gif），而将真正的src保存到一个自定义属性中，在滚动屏幕的时候，如果图片出现的可视窗口内，则将该img的真实地址保存在src中。

简易懒加载的实现

如上代码所述，经过简单的封装，使用lazyload的方法也很简单：

至此，一个简单的懒加载基本就实现了，当然这只是简单的模拟，还有很多需要考虑的问题（如兼容性、水平方向、时间间隔等）没有具体实现。

附上实际效果图：