lazyload懒加载的使用

1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?20121015"></script>

2.对于要懒加载的图片进行如下属性设置。<img src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://img03.taobaocdn.com/tps/i3/T1xl4_FlFaXXcLmU_5-305-317.png" />

其中src为未加载时的图片，dataimg为实际要加载的图片。

3.执行lazyload.init();

4.分tab的懒加载。判断tab把下面的图片有没加载过。根据loaded属性判断，还要对非当前tab所属的图片进行class lazy去掉。对已加载的loaded为true的图片，不加lazy属性

5.注意lazyload.init()的执行时机，如果在dom ready阶段执行，会下载所有图片，不能实现懒加载。要在winow.onload完成这个阶段去执行。

lazyload.js代码解读：

/**
 * 基于jQuery或者zeptoJS的惰性加载
 */
var lazyload = {
  init : function(opt){
    var that = this;
    var op = {
        anim: true,
        extend_height:400
    };
    // 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt
    $.extend(op,opt);
    // 调用lazyload.img.init(op)函数
    that.img.init(op);

  },

  img : {
    init : function(n){

      var that = this;
      console.log(n);

      // 要加载的图片是不是在指定窗口内
      function inViewport( el ) {
          // 当前窗口的顶部
        var top = window.pageYOffset
        // 当前窗口的底部
        var btm = window.pageYOffset + window.innerHeight
        // 元素所在整体页面内的y轴位置
        var elTop = $(el).offset().top;
        // 判断元素，是否在当前窗口，或者当前窗口延伸400像素内
        return elTop >= top && elTop - n.extend_height <= btm
      }

      // 滚动事件里判断，加载图片
       $(window).bind('scroll', function() {
          $('img.lazy').each(function(index,node) {
            var $this = $(this)
            if(!$this.attr('dataimg')){
              return
            }
            if ( !inViewport(this) ) return
            act($this)

          })
        }).trigger('scroll')

       // 展示图片
       function act(_self){
              // 已经加载过了，则中断后续代码
           if (_self.attr('loaded')) return;
            var img = new Image(), original = _self.attr('dataimg')
            // 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示
            img.onload = function() {
                _self.attr('src', original).removeClass('lazy');
                n.anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
            }
            // 当你设置img.src的时候，浏览器就在发送图片请求了
            original && (img.src = original);
             _self.attr('loaded', true);
       }
    }
  }
};

2015年6月30日添加用例

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title>懒加载实例</title>
        <style type="text/css">
        /*一定要有预先高度*/
            img{
                width: 600px;
                height: 260px;
            }
        </style>
    </head>

    <body>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/11de79502d0af.jpg!v1sell" alt="" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/33f99f823ed3d.jpg!v1sell" alt="" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/680120973b82.jpg!v1sell" alt="" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/67f87ba08cf0.jpg!v1sell" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/22ec075a17c33.jpg!v1sell" alt="" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/2e4a699680788.jpg!v1sell" alt="" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/c2f4043a4991.jpg!v1sell" alt="" />
        </div>
        <div>
            <img class="samLazyImg" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://yangege.b0.upaiyun.com/33f996b4386ab.jpg!v1sell" alt="" />
        </div>
    </body>
    <script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var lazyload = {
          init : function(opt){
            var that = this,
            op = {
                anim: true,
                extend_height:0,
                selectorName:"img",
                realSrcAtr:"dataimg"
            };
            // 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt
            $.extend(op,opt);
            // 调用lazyload.img.init(op)函数
            that.img.init(op);
        
          },
        
          img : {
            init : function(n){
        
              var that = this,
              selectorName = n.selectorName,
              realSrcAtr = n.realSrcAtr,
              anim = n.anim;
//              console.log(n);
        
              // 要加载的图片是不是在指定窗口内
              function inViewport( el ) {
                  // 当前窗口的顶部
                var top = window.pageYOffset,
                // 当前窗口的底部
               btm = window.pageYOffset + window.innerHeight,
                // 元素所在整体页面内的y轴位置
               elTop = $(el).offset().top;
                // 判断元素，是否在当前窗口，或者当前窗口延伸400像素内
                return elTop >= top && elTop - n.extend_height <= btm;
              }
        
              // 滚动事件里判断，加载图片
               $(window).on('scroll', function() {
                  $(selectorName).each(function(index,node) {
                    var $this = $(this);
                    
                    if(!$this.attr(realSrcAtr) || !inViewport(this)){
                      return;
                    }
                   
                    act($this);
        
                  })
                }).trigger('scroll');
        
               // 展示图片
               function act(_self){
                      // 已经加载过了，则中断后续代码
                   if (_self.attr('lazyImgLoaded')) return;
                    var img = new Image(), 
                    original = _self.attr('dataimg');
                    // 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示
                    img.onload = function() {
                        _self.attr('src', original);
                        anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
                    };
                    // 当你设置img.src的时候，浏览器就在发送图片请求了
                    original && (img.src = original);
                     _self.attr('lazyImgLoaded', true);
               }
            }
          }
        };
        
        /*
         * selectorName，要懒加载的选择器名称
         * extend_height  扩展高度
         * anim  是否开启动画
         * realSrcAtr  图片真正地址*/
        lazyload.init({
            anim:false,
            selectorName:".samLazyImg"
        });
    </script>

</html>

 

posted @ 2014-01-11 17:35  草珊瑚  阅读(43978)  评论(2)  编辑  收藏  举报