jQuery懒加载

作者: fanison | 来源:发表于2019-04-02 22:08 被阅读18次

    在网页中,常常需要用到图片,而图片需要消耗较大的流量。正常情况下,浏览器会解析整个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>
    

    相关文章

      网友评论

        本文标题:jQuery懒加载

        本文链接:https://www.haomeiwen.com/subject/nqinbqtx.html