原生JS实现图片懒加载
懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。倘若一次ajax请求过来10张图片的地址，我想如果你一次性把10张图片都加载出来，肯定是不合理的。
第一：会显示的很慢，多加载1秒都会引起用户的流失，这对靠流量的网站来说绝对是噩梦。
第二：用户如果只是随便看看，没想全部看，这无疑是浪费了用户很多流量。
什么是懒加载
在图片非常多的应用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。
懒加载的实现原理
原理很简单，先把img的src指向空或者一个小图片，图片真实的地址存储在img一个自定义的属性里,< img src=”” data-src=”http://real.com/real.jpg” />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。
判断方法一
- 通过
document.documentElement.clientHeight获取屏幕可视窗口高度 - 通过
element.offsetTop获取元素相对于文档顶部的距离 - 通过
document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离
然后判断②-③<①是否成立，如果成立，元素就在可视区域内。
方法二（推荐）
通过getBoundingClientRect()方法来获取元素的大小以及位置，MDN上是这样描述的：
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
这个方法返回一个名为ClientRect的DOMRect对象，包含了top、right、botton、left、width、height这些值。
可以看出返回的元素位置是相对于左上角而言的，而不是边距。
我们思考一下，什么情况下图片进入可视区域。
假设const bound = el.getBoundingClientRect();来表示图片到可视区域顶部距离；
并设 const clientHeight = window.innerHeight;来表示可视区域的高度。
随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当bound.top===clientHeight时，图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点，图片就会进入可视区域。
也就是说，在bound.top<=clientHeight时，图片是在可视区域内的。
我们这样判断：
function isInSight(el) {
const bound = el.getBoundingClientRect();
const clientHeight = window.innerHeight;
//如果只考虑向下滚动加载
//const clientWidth = window.innerWeight;
return bound.top <= clientHeight + 100;
}这里有个+100是为了提前加载。
经提醒。。这个方法性能
滚动加载和函数节流
