picLazyLoad 实现图片延时加载(包含背景图片)

如下所示：

/** * 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||{});    // 执行懒加载图片    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;            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 实现图片延时加载(包含背景图片)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。