jquery-lazyload 插件使用

lazyload 延迟加载也称懒加载，适用于图片比较多且文档高度或宽度有好几屏的页面。

效果：页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载。这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。

使用方法：

　　1、导入lazyload.js文件

　　2、html

   　　<img class="lazyload" data-original="http://cdn1.showjoy.com/images/bf/bfb1a38b4b8643269d0b1a453b2e5fdf.jpg">

　　3、js

　　　　　$('.lazyload').picLazyLoad({

　　　　　　　　threshold: 200,　　

　　　　　　　　event : "click" ,

　　　　　　　　placeholder: 'http://cdn1.showjoy.com/images/6f/6f3a2e0b472c437ebcb72464c4bbb081.png' ,

　　　　　　　　effect : "fadeIn" ,
　　　　　　}); 

　　4、参数设置说明：

　　（1）threshold：设置临界值的参数，也就是触发位置到图片的距离，临界值的默认值为0，数值越大，用户越不能看到图片延迟加载的效果。

　　       如果比较看重用户体验，这个值可以好好利用。

　　（2）placeholder：占位图片，在图片没完全加载完的时候就显示的是图片的背景，可以用占位图片来填充这个背景。

　　（3）event：触发图片延迟加载的事件，可以是jQuery中的任意事件，比如鼠标点击(click)或鼠标悬停(hover)，还可以自定义事件。

　　       默认是用户拖动滚动条到使窗口到图片的位置的时候才加载。

　　（4）effect：图片在加载方式，默认的加载方式是show()方法，例子是设置加载效果为淡入(fadeIn)。

实现原理：

将图片的真实地址缓存在一个自定义的属性(data-original)中，不设置src属性。计算出可视区域，当页面滚动时，如果图片的位置出现在可视区域中，将src的值替换成真实的地址，此时图片就开始加载了。

源码（巨人的肩膀 ^_^）：

(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 );