延迟加载简易封装
延迟加载目的：
一、用户友好方面
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>
