图片懒加载的思路是这样的，当页面加载的时候首先加载的是一张默认的占位图，真正需要的图片不先加载，由于占位图一般都是一张，所以只需要一次请求即可。然后当滑动鼠标滚轮或者移动端滑动屏幕的时候，图片出现在可视区域的时候就显示图片。这里涉及到几个要点：

1.  占位图首先使用了图片的src属性

2.  真实图片通过data-*属性存储它

3. 滚动到特定时机的换图方法

/**
 * picLazyLoad 图片懒加载，适用于img标签和背景图情况
 * 
 * @property data-original: <String>  真实图片 url
 * @property threshold:     <Number>  进入可视区域提前加载的高度
 * @property placeholder:   <String>  用于背景图情况，占位图片 url
 * @funcition callback():   回调函数
 */

;(function($){
  $.fn.picLazyLoad = function(settings){
    var $this = $(this),
         // 窗口在可视区域外的高度
        _winScrollTop = 0,
         //分辨率高度
        _winHeight = window.screen.height;

    settings = $.extend({
     // 图片不进入可视区域内不加载
      threshold: 0, 
      // 这里设置普通占位图
      placeholder: '/images/placeholder.jpg',  
      callback: function(){
      }
    }, settings||{});

    // 执行懒加载图片
    lazyLoadPic();

    // 滚动触发换图
    $(window).on('scroll',function(){
       //记录滚动的高度
      _winScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        //执行并判断是否图片懒加载
      lazyLoadPic();
    });

    // 懒加载图片
    function lazyLoadPic(){
      $this.each(function(){
        var $self = $(this);
        if($self.is('img')){
          if($self.attr('data-original')){
            var _offsetTop = $self.offset().top;
            // threshold超过0，代表元素未出现在可视区域时就显示
            if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
              $self.attr('src',$self.attr('data-original'));
              $self.removeAttr('data-original');
              settings.callback($self);
            }
          }
        }else{
          if($self.attr('data-original')){ // 默认占位图片
            if($self.css('background-image') == 'none'){
              $self.css('background-image','url('+settings.placeholder+')');
            }
            var _offsetTop = $self.offset().top;
            if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
              $self.css('background-image','url('+$self.attr('data-original')+')');
              $self.removeAttr('data-original');
              settings.callback($self);
            }
          }
        }
      });
    }
  }
})(jQuery);

使用方法很简单，在图片加上lazyload类,src填写占位图URL,data-original填写真实图片URL

<img class="lazyload" src="/images/placeholder.jpg" data-original="/images/realpic.jpg">

然后调用

$('.lazyload').picLazyLoad();