延迟加载简易封装

延迟加载目的：

一、用户友好方面
1.加快页面展示效率。
2.节省流量(不得不说，图片请求在wap页面上是一笔相当大的开销)。
二、服务器方面
1.减少请求数量，降低服务器的压力。

网上很多延迟加载插件，不过这些插件都不能很好的匹配我们所需要的功能，所以决定自己动手鼓捣一个。
参考：jquery.lazyload.js

看了下jquery.lazyload.js的源码，对延迟加载的原理有了一定的理解，先确定下自己产品的需求。

1.滚动加载（必须的）
2.显示效果为渐现，和team保持一致
3.占位图片要有
4.需要留有延迟加载对象的接口（大部分数据都是ajax请求加载，需要在请求完成后把对象塞进对象接口）。

插件使用：zepto.js

插件代码

var lazyLoad={
	elements:[],
	scroll:function(){
		var $window=$(window);
		$window.bind('scroll',function(){
			if(lazyLoad.elements.length===0){
				return;
			}
			lazyLoad.elements.each(function(){
				var _this=this,$this=$(this);
				_this.loaded=false;
				if($window.height()+$window.scrollTop()>$this.offset().top && $window.scrollTop()<$this.offset().top+$this.height()){					
					var _tagthis=this,$tagthis=$(this);
					$('<img />').bind('load',function(){
						$tagthis.hide();
						$tagthis.attr('src',$tagthis.attr('data-original')).fadeIn(500);
						_tagthis.loaded=true;
						var temp=$.grep(lazyLoad.elements,function(element){
							return !element.loaded;
						});
						lazyLoad.elements=$(temp);
					}).attr('src',$tagthis.attr('data-original'));
				};
			});
		});
	}
}

JS代码

$(function(){
	lazyLoad.elements=$('img');
	lazyLoad.scroll();
	setTimeout(function(){
		$(window).trigger('scroll');//当前数据都加载成功以后先执行以下滚动事件，初始化以下页面
	})
	setTimeout(function(){
		for(var i=0;i<4;i++){
			var oImg=$('<img />');
			oImg.attr({'src':'jinyubin2.jpeg','data-original':'jinyubin1.jpg'}).appendTo('body');
			lazyLoad.elements.push(oImg.get(0));//图片对象放进带加载对象数组中
		};
		$(window).trigger('scroll');//当前数据都加载成功以后先执行以下滚动事件，初始化以下页面
	},5000)
})

　　

HTML代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="lazyload.js"></script>
	<style type="text/css">
	img{display:block;}
	</style>
	<img src="jinyubin2.jpeg" data-original="jinyubin1.jpg" />
	<img src="jinyubin2.jpeg" data-original="jinyubin1.jpg" />
	<img src="jinyubin2.jpeg" data-original="jinyubin1.jpg" />
	<img src="jinyubin2.jpeg" data-original="jinyubin1.jpg" />
	<img src="jinyubin2.jpeg" data-original="jinyubin1.jpg" />
	<img src="jinyubin2.jpeg" data-original="jinyubin1.jpg" />
 </body>
</html>

　　

　　

　　

 

posted @ 2014-08-03 10:45  invincible_hehe  阅读(270)  评论(0)    收藏  举报