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

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 lazyLooasxRzbSgzadPic(){

$this.each(function(){

var $self = $(this);

if($self.is('img')){

if($self.attr('data-original')){

var _offsetTop = $self.offset().top;

if((_offsetTop - settings.threshold) &lhttp://t;= (_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){

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。