这篇文章主要介绍了使用jquery实现的一个图片加载插件,同时讲解了图片加载的原理,还有无阻塞加载广告的功能哦,需要的朋友可以参考下

图片加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留,还可以节省流量。如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载。

图片加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全的占位图片来代替,当然占位图片也可以是其他的图片。

<img src="images/placeholder.png"  lazy-src="images/realimg.jpg" />

因为是使用javascript来加载图片,如果用户禁用了javascript,可以设置一个替代的方案。

<img src="images/placeholder.png"  lazy-src="images/realimg.jpg" alt="" />
<noscript><img src="images/realimg.jpg"  alt="" /></noscript>

页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow),计算出可视区域,当图片的位置出现在可视区域中,将src的值替换成真实的地址,此时图片就开始加载了。

当页面的时候,再判断图片已经缓存的位置值是否出现在可视区域内,进行替换src加载。当所有的图片都加载完之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器,那么也可以在页面中设置一个小容器,在小容器中也同样可以实现图片的加载。

下面是实现的代码,我写成了jQuery插件。


(function( $ ){
$.fn.imglazyload = function( options ){
 var o = $.extend({
attr: 'lazy-src',
container  :  window, 
event :  'scroll',
fadeIn  : false,  
threshold  :  0, 
vertical  :  true 
 }, options ),

event = o.event,
vertical = o.vertical,
container = $( o.container ),
threshold = o.threshold, 
// 将jQuery对象转换成DOM数组便于操作
elems = $.makeArray( $(this) ),
dataName = 'imglazyload_offset',
OFFSET = vertical ? 'top' : 'left',
SCROLL = vertical ? 'scrollTop' : 'scrollLeft', 
winSize = vertical ? container.height() : container.width(),
scrollCoord = container[ SCROLL ](),
docSize = winSize + scrollCoord;

 // 加载的触发器 
 var trigger = {

init : function( coord ){
 return coord >= scrollCoord &&
  coord <= ( docSize + threshold );
},

scroll : function( coord ){
 var scrollCoord = container[ SCROLL ]();
 return coord >= scrollCoord &&
  coord <= ( winSize + scrollCoord + threshold );
},

resize : function( coord ){
 var scrollCoord = container[ SCROLL ](),
winSize = vertical ?
  container.height() :
  container.width();
 return coord >= scrollCoord &&
coord <= ( winSize + scrollCoord + threshold );
}
 };

 var loader = function( triggerElem, event ){
var i = 0,
 isCustom = false,
 isTrigger, coord, elem, $elem, lazySrc;

// 自定义事件只要触发即可,无需再判断
if( event ){
 if( event !== 'scroll' && event !== 'resize' ){
isCustom = true;
 }
}
else{
 event = 'init';
}

for( ; i < elems.length; i++ ){ 
 isTrigger = false;
 elem = elems[i];
 $elem = $( elem );
 lazySrc = $elem.attr( o.attr );

 if( !lazySrc || elem.src === lazySrc ){
continue;
 }
 // 先从缓存获取offset值,缓存中没有才获取计算值,
 // 将计算值缓存,避免重复获取引起的reflow
 coord = $elem.data( dataName );

 if( coord === undefined ){
coord = $elem.offset()[ OFFSET ];
$elem.data( dataName, coord );
 }

 isTrigger = isCustom || trigger[ event ]( coord ); 

 if( isTrigger ){
// 加载图片
elem.src = lazySrc;
if( o.fadeIn ){
 $elem.hide().fadeIn();
}
// 移除缓存
$elem.removeData( dataName );
// 从DOM数组中移除该DOM
elems.splice( i--, 1 );
 }
}

// 所有的图片加载完后卸载触发事件
if( !elems.length ){
 if( triggerElem ){
triggerElem.unbind( event, fire );
 }
 else{
container.unbind( o.event, fire );
 }
 $( window ).unbind( 'resize', fire );
 elems = null;
}

 };

 var fire = function( e ){
loader( $(this), e.type );
 };

 // 绑定事件
 container = event === 'scroll' ? container : $( this ); 
 container.bind( event, fire );
 $( window ).bind( 'resize', fire );

 // 初始化
 loader();

 return this;
};

})( jQuery );


调用:


$( 'img' ).imglazyload({
 event : 'scroll',
 attr : 'lazy-src'
});

默认的调用可以省略所有参数。
$( 'img' ).imglazyload();

图片加载的插件API说明:

attr string
存放图片真实地址的属性名,与HTML对应,默认是lazy-src。

container dom & selector
默认的容器为window,可自定义容器。

event stirng
触发图片加载的事件类型,默认为window.onscroll事件

fadeIn boolean
是否使用jQuery的fadeIn效果来显示,默认是false。

threshold number
页面到离图片还有指定距离的时候就进行加载,默认是0。

vertical boolean
是否横向,默认为true(纵向)。

loadScript(增强版的功能) boolean
是否无阻塞加载javascript广告图片,默认为false。

最新资讯
解构阿里经济体(上):零售帝国商业演进的最强样板

解构阿里经济体(上):

和美国的亚马逊一样,中国的阿里巴巴是一座经营的“高峰
故宫回应夜场常态化:或结合二十四节气推出夜场活动

故宫回应夜场常态化:或

故宫博物院院长单霁翔刚刚表示:要经过本次元宵节活动进
故宫回应夜场常态化:或结合24节气推出夜场活动

故宫回应夜场常态化:或

故宫博物院院长单霁翔刚刚表示:经过评估后,或结合二十四
中国联通1月4G用户3.18亿户 固网宽带用户8150.7万户

中国联通1月4G用户3.1

移动业务方面,中国联通1月移动出账用户累计到达数3.18
比特大陆大规模裁员?回应:传闻不实 系正常人员调整

比特大陆大规模裁员?回

2月19日,有消息称,比特大陆完成了一轮大规模裁员。对此,
中金回应阿里入股:欢迎长期投资者 探索信息科技应用

中金回应阿里入股:欢

中金表示,公司致力于提升公司价值并得到市场认可。我们
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图