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)
})