原生js控制页面图片懒加载

最近做的网站页面要求比较酷炫，图片也比较多，而且图片的像素也高，导致页面加载很慢。
打开速度够我去撒泡尿，左调右调就是慢。

领导看我的眼神都变了，最后没办法，写了一个图片懒加载：

  <div class="bottom_mb_contant1">
            <div class="bd">
                <ul>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/huodong1.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/huodong2.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/huodong3.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/huodong4.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/huodong5.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/huodong6.jpg" /></a></li>
                </ul>
            </div>
            <p class="next">></p>
            <p class="prev"><</p>
        </div>
        <div class="bottom_mb_contant1">
            <div class="bd">
                <ul>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo01.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo02.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo03.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo04.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo05.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo06.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo07.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo08.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo09.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo10.jpg" /></a></li>
                    <li><a target="_blank" href="javascript:;"><img class="index_img" src="" data-src="images/hezuo11.jpg" /></a></li>
                </ul>
            </div>
            <p class="next">></p>
            <p class="prev"><</p>
        </div>

把所有的img加上class=“index_img” src="" data_src=“图片地址”；
这样在页面开始的时候是不会加载图片的。
然后通过js设定在网站可视范围内加载图片

  //图片懒加载

   var imgs = document.querySelectorAll('.index_img');

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

    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);
    }

最后在网页加载的时候，只会先加载可视范围内的图片。速度嗖嗖的。！