下面小編就為大家?guī)硪黄猵icLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。

如下所示： 

/**

 * picLazyLoad 圖片延時加載，包含背景圖片

 * $(img).picLazyLoad({...})

 * data-original 預加載圖片地址

 * alon

 */

;(function($){

  $.fn.imgLazyLoad = function(settings){

    var $this = $(this),

      _winScrollTop = 0,

      _winHeight = $(window).height();

    settings = $.extend({

      threshold: 0, // 提前高度加載

      placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',

      callback:function(){}

    }, settings||{});

    // 執(zhí)行懶加載圖片

    lazyLoadPic();

    // 滾動觸發(fā)換圖

    $(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;

            if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){

              $self.attr('src',$self.attr('data-original'));

              $self.removeAttr('data-original');

              $self.removeClass('loadH');

              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);

            }

          }

        }

      });

    }

  }

})(Zepto);

調用

$('img').imgLazyLoad({callback:function(data){

 })

以上這篇picLazyLoad 實現(xiàn)圖片延時加載(包含背景圖片)就是小編分享給大家的全部內容了，希望能給大家一個參考