jquery实现的图片延时加载插件

jquery实现的图片延时加载插件:
在很多网站尤其是图片站，都采用了图片延时加载效果，这样可以有效的减轻服务器的压力，有点自然不言而喻了，下面就和大家分享一个图片延时加载的插件，希望能够给大家带来一定的帮助。
代码如下:

<script type="text/javascript"> (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 ); </script>

实现原理:
需要先将图片的真实地址保存在一个自定义的属性中（属性名任你发挥吧，这里我用的是lazy-src），而图片的src属性中用一个占位图片来替代，这个占位图片当然是越小越好，因为它不会有显示在页面中。

<img src='/images/loading.gif' data-original="images/placeholder.png" lazy-src='/images/loading.gif' data-original="images/realimg.jpg"  />

首先，页面开始加载时浏览器会获取所有图片在当前页面中的位置并缓存(获取offset的值时，页面的reflow会被引发)，计算出可视区域，当图片的位置出现在可视区域中，利用js动态地将图片标签中的src值替换成图片真实的地址，这时，刚刚出现在可视区域的图片便开始加载。 
其次。当用户向下滚动页面时，通过js再次计算是否有图片初次出现可视区域内，如果有，刚对这些图片的src值进行替换，并开始加载真实图片。为了避免重复操作引起的内存泄漏，需要在全部图片加载完后，卸载掉相应的触发事件。 
最后。本文是将整个窗口看成是一个大容器，如果愿意，也可以在页面中设置一个小容器，在小容器中也同样可以实现图片的延迟加载。原理虽然简单，但是应用是多样的。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8672

更多内容可以参阅:http://www.softwhy.com/jquery/

原标题：jquery实现的图片延时加载插件

关键词：jquery