懒加载

/**
 * 基于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);
       }
    }
  }
};