picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)

    下面小編就為大家?guī)硪黄猵icLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
    如下所示： 
    /**
     * picLazyLoad 圖片延時(shí)加載，包含背景圖片
     * $(img).picLazyLoad({...})
     * data-original 預(yù)加載圖片地址
     * 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();
        // 滾動(dòng)觸發(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')){// 默認(rèn)占位圖片
                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);
    調(diào)用
    $('img').imgLazyLoad({callback:function(data){
     })
    以上這篇picLazyLoad 實(shí)現(xiàn)圖片延時(shí)加載(包含背景圖片)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考