使用jquery实现的一个图片延迟加载插件（含图片(2)

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。

您可能感兴趣的文章: