延迟加载目的：javascript
1、用户友好方面
1.加快页面展现效率。
2.节省流量(不得不说，图片请求在wap页面上是一笔至关大的开销)。
2、服务器方面
1.减小请求数量，下降服务器的压力。css
网上不少延迟加载插件，不过这些插件都不能很好的匹配咱们所须要的功能，因此决定本身动手鼓捣一个。
参考：jquery.lazyload.jshtml
看了下jquery.lazyload.js的源码，对延迟加载的原理有了必定的理解，先肯定下本身产品的需求。java
1.滚动加载（必须的）
2.显示效果为渐现，和team保持一致
3.占位图片要有
4.须要留有延迟加载对象的接口（大部分数据都是ajax请求加载，须要在请求完成后把对象塞进对象接口）。jquery
插件使用：zepto.jsajax
插件代码数组
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代码app
<!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>