以前的玩法是判断图片有没有到可视区，判断图片到文档顶部的距离是不是和视口的高度加上滚动的距离一样，事件是用onscroll,这种方式性能不好
- 现在还有一种新的api intersetion Observer 求视口和元素的有没有重叠
- 监听图片是否在可视区域内,如果不在可视区域内图片的src可以显示一张雪花图或者显示默认占位,真正要显示的图片存在data-src中当图片在可视区域后,加载data-src的图片,保证data-src的图片加载完,在赋值给src,创建一个img元素,将创建的img元素的src设置为data-src,通过img的onload事件判断改img是否加载完成,如果加载完成将图片的src替换为data-src
- 如何监听图片在可视区域内:
- 利用滚动位置进行计算: 重复进行监听消耗性能webapi: Intersection Observer 实现dom监听,并且是异步的,兼容性不好借助polyfill,或者使用intersection-observer npm包
