延遲加載簡易封裝

時間 2019-11-30

標籤延遲加載簡易封裝欄目軟件設計简体版

原文原文鏈接

延遲加載目的：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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。