picLazyLoad 实现图片延时加载(包含背景图片)
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇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 实现图片延时加载(包含背景图片)就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。