图片懒加载之data-src

转载自：https://juejin.im/post/5add55dd6fb9a07aad171f76
应用场景：
如果一个页面如果有许多张图片要加载，可以通过懒加载的方式来达到提升图片加载速度的效果、
实现思路：
通过data-src属性存储的图片真实地址,此时的Img标签没有src属性，当图片出现在可视区域时，通过设置img标签的src属性来实现加载图片，
判断图片是否进入可视区域
两种方法：
方法一：
判断该图片距离document顶部的距离是否小于可视区域距离document顶部的距离，如果小于，则加载图片
可视区域高度：const clientHeight = document.documentElement.clientHeight; // 视口高度，也就是窗口的高度。
可视区域距离document顶部的距离：const scrollHeight = document.documentElement.scrollTop + clientHeight; // 滚动条偏移文档顶部的高度（也就是文档从顶部开始到可视区域被抹去的高度） + 视口高度
元素距离document顶部的距离：元素.getBoundingClientRect().top
实例：