图片懒加载

[TongtongGitHub]

图片懒加载

当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。

具体实现就是先不设置img的src属性，比如先将url存放在data-src属性中，然后当页面滚动时把真实的url放在img的src属性中。

<img data-src="http://pic.made-in-china.com/64f57j00HQatIdiRjEVP/Punching-Holes-Aluminum-Plastic-Composite-Paneling.jpg" src="http://www.micstatic.com/sh/img/space.png?_v=1496223518143"/>

        //获得对象距离页面顶端的距离  
        function getDistance(obj) {  
            var h = 0;  
            while (obj) {  
                h += obj.offsetTop;  
                obj = obj.offsetParent;  
            }  
            return h;  
        }  

        window.onscroll = function () {
            $("img[data-src]").each(function(index, el) {
                var screenHeight = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
                var distance = getDistance(el);
                if (distance < screenHeight) {
                    setTimeout(function(){
                        $(el).attr("src",$(el).attr("data-src"))
                    }, 0);
                }
            });
        };
        //页面加载完成后加载当前显示的图片
        window.onload = function () {
            window.onscroll();
        };