jQuery懒加载

在网页中，常常需要用到图片，而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。

懒加载即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。

原理：

在输出HTML的时候，不要直接输出<img src="xxx"，而是输出如下img标签：
<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">
因此，页面显示的图片是一个gif加载动画。当页面滚动时，如果图片出现在屏幕中，就利用jQuery把<img>的src属性替换为data-src的内容，浏览器就会实时加载。

1.判断元素出现在视野中

height

红色区域为当前窗口，绿色区域代表整个页面，横线代表一行文字

从上图中可以看出，如果
$(node).offset().top <= $(window).height() + $(window).scrolltop()
那么文字出现在用户视野

function isShow($node){
  return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

2.加载图片

使用jQuery将src地址替换为data-src地址

 <img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
 <img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
 <img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
 <img src="https://yafanisonya.github.io/resume/houseofcards/img/loading.gif" alt="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">

function loadImg($img){
      $img.attr('src', $img.attr('data-src')) // 设置src属性
      $img.attr('data-isLoaded', 1)  //已加载过的图片做标记
      //当用户在滚动时判断图片是否已经加载，若加载过，就不在加载
 }

lazyLoad

js代码

   //用户一开始进来的时候就进行一次是否出现在可视窗口的判断
    start()
    //滚动页面再进行判断
    $(window).on('scroll', function(){
      start()
    })
    
    function start(){
      //.not('[data-isLoaded]')选中已加载的图片不需要重新加载
      $('.container img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
          loadImg($node)
        }
      })
    }
    
    //判断一个元素是否出现在可视窗口
    function isShow($node){
      return $node.offset().top <= $(window).height() + $(window).scrollTop()
    }
    //加载图片
    function loadImg($img){
      $img.attr('src', $img.attr('data-src'))
      $img.attr('data-isLoaded', 1)
    }

</script>

最后编辑于：2019.04.02 22:10:22