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