前端懒加载图片

<style>

.bg-img-load{

background-img:url("loading 图的 url ");/* 这是给 使用背景图的,使用img的 得更改其src 属性; */

}

</style>

var body = $("body").get(0);
var n = 0;//存储图片加载到的位置，计数 看加载了几次
body.onscroll = function () {
    scrollLoad(this.offsetHeight);
};

function scrollLoad(seeHeight) {

//可以是img 或者 背景图  原理就是 把 图片统一修改为loading图 然后在滚动到当前图片时,把其链接更改为 原图链接;

// 如果为了更准确定位 其实 还可以用上图片预加载  先预加载原图 得到原图的比例 根据实际情况计算出其高度与loading图的高度差;响应增加或减少 

// 这样效率不好;

  $(".bg-img-load,.img-load").each(function (i) {
        var obj = $(this);//本来是 打算直接用 this.offsetTop 的 但是得到的值 一直是0 不知道为什么 就用 jquery 了
        if (obj.offset().top < seeHeight) {
            n++;
            console.info(n);//计数
            if (obj.is("img")) {
                obj.attr("src", obj.attr('data-src'));//data-src的值 就是图片的链接  根据实际情况 操作;
                obj.removeClass("img-load");
            } else {
                obj.removeClass("bg-img-load");//呼应上面的css样式;
            }
        } else {
            return false;//不继续遍历之后的图片;性能上的小优化;
        }
    });
}

scrollLoad(body.offsetHeight * 1.5);//*1.5 也可以是 *2 是为了适应 有的原图比loading图矮  导致初次加载的时候 出现 页面上有几个图 显示的是loaidng图;

可以 再加个定时器 0.3秒 执行三次 这样最大程度避免