这篇文章主要介绍了使用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。

最新资讯
蔚来李斌:创业的本质是你永远无法在当下找到最优解

蔚来李斌:创业的本质是

有太多东西模糊了蔚来的真实面目。从2018年开始,蔚来基
华为再度进军巴西智能手机市场,挑战三星摩托罗拉

华为再度进军巴西智能

华为在巴西推出了两款高端手机,再次尝试打入巴西智能手
创业里第二难的事情 大多数创业公司死于融资

创业里第二难的事情

创业里最难的是做出大众需要的产品:创业公司最常见死因
黑莓信息服务BBM于5月底关闭个人版:企业版不受影响

黑莓信息服务BBM于5月

与消费者版本相比,企业版BBM拥有更多的功能,例如端对端
这些年我们是如何计算地球年龄的? 科普贴请查收

这些年我们是如何计算

“地球的年龄是多少?”在400年前的欧洲,爱尔兰人詹姆斯
天猫精灵:隐私是智能音箱生命线,望3年追亚马逊销量

天猫精灵:隐私是智能

在阿里巴巴人工智能实验室推出第一款天猫精灵两年之后
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编