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

最新资讯
腾讯:WeCom是企业微信海外版 和WeChat是不同产品

腾讯:WeCom是企业微信

腾讯方面对在美运营WeCom产品向新浪科技回应表示,WeCom
令人困惑的阿里“新制造”

令人困惑的阿里“新制

阿里发布了开发三年的新制造项目犀牛智造,但它究竟是什
这个由女性数学家创建的理论,重塑了物理学今天的面貌

这个由女性数学家创建

在女性被认为智力不如男性的时代,诺特赢得了男同事的钦
喝咖啡能减少癌症死亡?研究发现,咖啡与结肠癌患者生存期改善有关

喝咖啡能减少癌症死亡

研究结果显示,在晚期或转移性结直肠癌患者中,咖啡饮用量
你睡得好吗?新研究发现,长期睡眠不佳,埋下阿尔茨海默病的隐患

你睡得好吗?新研究发现

越来越多的科学研究证明,睡眠不足给身心健康都会带来深
感觉到冷别硬抗,小心骨骼受损!

感觉到冷别硬抗,小心骨

通过流行病学分析、实验以及先进的宏基因组和代谢组学
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,