延时加载（lazy load）

延时加载（lazy load）

---

1. 什么是延时加载？

相关背景：
当项目中的页面需要加载大量的图片时，如果不进行相关的优化处理，显然页面的性能和对用户的体验是非常不友好的。如果3s还没有加载完成，用户很可能直接关掉你的页面。
优化的方式有很多，首先从源头来讲，可以对加载的图片信息进行优化处理，代码精简减少冗余。和—–延时加载。
定义：
延时加载 即 当在真正需要数据的时候，才真正执行数据加载操作。是一种对加载方式的优化，相对于一次性加载完整个页面的所有文件。它更灵活，更快速(从用户体验角度）。

---

2.延时加载的三种实现方式

这里列举常见的三种延时加载的实现方式：
第一种：
首先，页面上的图片src 设置为： loading.gif
图片的真实路径设置在data-src中。
当图片出现在浏览器视口时，将图片的src设置为data-src的值，即可实现延时加载。
该方法缺点：性能差。
第二种 ：
直接将函数绑在scroll事件上，页面滚动时，函数会被高频触发，影响性能。
坐事件绑定时，可以对lazyload函数进行函数节流和函数去抖处理。
第三种：
使用交叉观察器IntersectionObserverAPI(传送门：阮一峰大神的详解) 自动观察元素是否可见。