懒加载图片

使用背景

这是在编写一个网页专题时，从后端接口接收到图片时，以防图片加载出错，显示错误图片不美观而采取的措施。

使用前提

1.首先要在懒加载的img标签内添加绑定属性，如data-src,并且给一个默认图片src链接（用以当图片加载出错或未加载时显示）
2. 获取到所有需要懒加载的图片imgs
3. 调用以下方法
···

//懒加载图片
function loadImg(imgs) {
    // 可视区域高度
    var h = window.innerHeight;
    //滚动区域高度
    var s = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < imgs.length; i++) {    
        if(imgs[i].offsetTop<h+s){        
            (function (i) {
                setTimeout(function () {
                    // 不加立即执行函数i会等于9
                    // 隐形加载图片或其他资源
                    var temp = new Image();
                    temp.src = imgs[i].getAttribute('data-src');
                    // 图片加载完毕才赋值，否则一直使用默认图片
                    temp.onload = function () {
                        // 获取自定义属性data-src，用真图片替换默认图片
                        imgs[i].src = imgs[i].getAttribute('data-src')
                    }
                }, 0)
            })(i)
        }
    }
}

···
4.我这里每次只获取10条数据，所以并不太需要判断距离滚动加载，直接在获取到数据之后调用了这个方法。
5.如需滚动加载可以这样：
···

loadImg(imgs); //页面载入完毕加载可是区域内的图片
window.onscroll = loadImg(imgs);//滚动加载

···
That’s all!