js的图片懒加载

当网页中的图片文件过多的时候，页面加载的速度会变慢于是去学了了一下图片懒加载的方法。

html中的img标签将图片的路径放到data中，然后src属性为空。

<img src="" data-src="images/bank1.jpg" alt="Clients Logo">

js
querySelectorAll选中页面中所有的图片元素
getTop是元素离页面顶部的距离
lazyLoad是用来判断页面高度加上页面滚动的距离是否大于元素距离页面顶部的距离，如果是就讲img标签的data-src的值赋值给src属性实现图片懒加载
最后监听页面的滚动，监听方法是lazyLoad

<!--懒加载-->
<script type="text/javascript">
    var imgs = document.querySelectorAll('img');

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

    function lazyLoad(imgs) {
        var H = window.innerHeight;
        var S = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgs.length; i++) {
            if (H + S > getTop(imgs[i])) {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }

    window.onload = window.onscroll = function () {
        lazyLoad(imgs);
    }
</script>