懒加载

学习懒加载

一、为什么需要懒加载？

• 对于图片过多的使用场景，为了提高页面加载速度，改善用户体验，我们对未出现在视野范围内的图片先不进行加载，等到出现在视野范围才去加载。

二、懒加载的实现原理

• 它的实现原理很简单，先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里，<img src='lazy-load.png' data-src='xxx'/>,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。

三、实现懒加载必备的知识点

（一）获取窗口、窗口滚动和元素距离窗口顶部的偏移高度，计算元素是否出现在窗口可视范围内；

function isShow($e){
    var winH = $(window).height(), //获取窗口高度
        scrollH = $(window).scrollTop(), // 获取窗口滚动高度
        top = $e.offset().top; // 获取元素距离窗口顶部偏移高度
    if(top < scrollH + winH){
        return true; // 在可是范围
    } else {
        return false; // 不在可是范围
    }
}

（二）监听窗口滚动事件，检查元素是否在可视范围内;

$(window).on('scroll', function(){//监听滚动事件
    checkShow();
})
checkShow();
function checkShow(){//检查元素是否在可视范围内
    $('img').each(function(){//遍历每一个元素
        var $cur = $(this);
        if(!!isloaded($cur)){return;}//判断是否已加载
        if (isShow($cur)) {
          setTimeout(function(){
            showImg($cur);
            },300)//设置时间是为了更好的看出效果
        };
    });
}

（三）元素显示的时候把之前的默认照片替换成data-src里的照片。

function showImg($e) {
    $e.attr('src',$e.attr('data-src'));
    $cur.data('isloaded',true);
}