原生JS实现图片懒加载

最近接的项目终于接近尾声，这段时间一直没有造轮子，在实现设计图还原的途中，发现还是有一些技术需要掌握，难者不会，会者不难，没有实际操作过的东西在项目中毫无头绪，而懒加载在实际开发中是一个很有效的东西，在页面中我们往往需要放上很多张图，性能是个大问题，一次性加载所有图片一般都会卡很久，因此，在需要预览的时候再加载，是一个很好的解决方案。
参考了https://www.denpe.com/javascript-images-lazyload/
实现懒加载有很多种方法，但基本原理是相同的，就是当图片出现在浏览器可视区域中时，再把图片的url传给它，也可以在这个时候创建图片，而图片被包裹在一个容器中，比如li或div，图片的url放在其容器的自定义属性data-src中；
考虑到模块的独立，这里不用容器，直接使用img

判定其加载条件是，当图片距离页面顶端的距离小于浏览器滚动距离加上可视区域高度，即它出现在可视区域时，就加载它；
- 获取图片距离页面顶端的高度利用offsetTop计算出其距离offsetParent的高度，再循环叠加，最终获取到其距离页面顶端的高度：

//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
        function getTop(e) {
   
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetParent;
            }
            return T;
        }

• 可视区域高度为

var H = window.innerHeight;

• 滚动距离为

var S = document.documentElement.scrollTop || document.body.scrollTop;

然后定义赋值函数

function lazyLoad(imgs) {
            var H = window.innerHeight;
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {