javascript图片懒加载

1.啥是图片懒加载 也就是 图片在浏览器可以看到的范围内 把图片加载出来

2.为啥要懒加载 因为要减少请求加载 优化速度

3.首先 我们要forEach循环所有图片  把所有图片加载一遍  

lazyRender()
function lazyRender() {
    $('.cover img').each(function () {
     4.在循环里面进行一系列判断 
        if (checkShow($(this)) && !isLoaded($(this))) {
            loadImg($(this));
        }
    })
}  

5.我使用了两个方法来进行判断是否让他显示加载出的图片

checkShow($(this)  和  !isLoaded($(this))

6.第一个方法  根据浏览器的自身高度  和  当前位置距离浏览器的高度  以及 每个图片距离浏览器顶部的高度

function checkShow($img) { // 传入一个img的jq对象 
        var scrollTop = $(window).scrollTop(); //页面向上滚动的距离 
        var windowHeight = $(window).height(); // 浏览器自身高度
        var offsetTop = $img.offset().top;  //每张图片距离头部的距离
           if(offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { 
                 //在2个临界状态之间的就为出现在视野中的 
              return true;
        }
        return false;
}    

8.第二个方法 也就是判断这张图片是否加载过  目的 减少不必要的重复覆盖

function isLoaded($img) {
    return $img.attr('data-src') === $img.attr('src');
    //如果data-src和src相等那么就是已经加载过了 
}

这个方法加上个  非 也就是如果加载过是为真 那么就返回假   如果没加载过是为假 就返回真

9.怎么实时判断呢  就用 页面滚动触发函数中写

 

var clock;    //这里的clock为timeID， 返回一个 ID（数字），
 $('window').on('scroll',function(){  //只要在300毫秒内触发滚动事件，都会被clearTimeout掉，setTimeout不会执行。
 //只要在300毫秒内触发滚动事件，都会被clearTimeout掉，setTimeout不会执行。
  
  //如果有300毫秒外的操作，会得到一个新的timeID即clock，会执行一次setTimeout,然后保存这次setTimeout的ID，
    
 //对于300毫秒内的scroll事件，不会生成新的timeID值，所以会一直被clearTimeout掉，不会执行setTimeout.

     if（clock）{
       clearTimeout(clock) //取消定时器
     }
     //为了不在滚轮滚动过程中就一直判定，设置个setTimeout,等停止滚动后再去判定是否出现在视野中。
       clock = setTimeout（function（）{
       lazyRender()  //进行判断方法
     }，300)
})