Jquery圖檔懶加載和預加載

懶加載

1.什麼是懶加載

Lazy Load也叫懶加載，延遲加載，顧名思義，就是在圖檔未到達可視區域時，不加載圖檔，我們常常在很多的優秀網站上看到類似的例子，例如迅雷、洋芋、優酷等，由于一個網頁的圖檔非常多，一次性加載增加伺服器壓力，而且使用者未必會拉到底部，浪費使用者流量，Lazy Load采用按需加載，更快的加載速度進而達到優化網頁的目的。

懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。

使用者滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載将使網頁加載更快。

在某些情況下，它還可以幫助減少伺服器負載。常适用圖檔很多，頁面很長的電商網站場景中。

2.為什麼要用懶加載

能提升使用者的體驗，不妨設想下，使用者打開像手機淘寶長頁面的時候，如果頁面上所有的圖檔都需要加載，由于圖檔數目較大，等待時間很長，使用者難免會心生抱怨，這就嚴重影響使用者體驗。
減少無效資源的加載，這樣能明顯減少了伺服器的壓力和流量，也能夠減小浏覽器的負擔。
防止并發加載的資源過多會阻塞js的加載，影響網站的正常使用。

3.懶加載的原理

首先将頁面上的圖檔的 src 屬性設為空字元串，而圖檔的真實路徑則設定在data-original屬性中。

當頁面滾動的時候需要去監聽scroll事件，在scroll事件的回調中，判斷我們的懶加載的圖檔是否進入可視區域,如果圖檔在可視區内将圖檔的 src 屬性設定為data-original 的值，這樣就可以實作延遲加載。

4.案例

需要的HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			#image {
				margin: 0 auto;
				padding: 10px;
				width: 80%;
				border: 1px salmon solid;
				/*開啟彈性布局*/
				display: flex;
				/*wrap：換行，第一行在上方。*/
				flex-wrap: wrap;
				/*或者使用 兩端對齊，項目之間的間隔都相等。*/
				justify-content: space-between;
			}
		
			.album {
				width: 150px;
				height: 150px;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
			animation: key1 3s infinite forwards alternate;
			}
			
			@keyframes key1 {
				0% {
								
				}
				20% {
					transform:translate(0px ,-13px);
							
				}
				40% {
					transform:translate(0px ,15px);
							
				}
			
				100% {
					transform:translate(0px ,0px);
			
				}
			}
			
		
			.album:hover {
		
				animation: key 0.5s;
		
			}
		
			@keyframes key {
				0% {}
		
				100% {
					transform: scale(1.2);
		
				}
			}
		
		
			.p1 {
				animation: key 4s infinite forwards alternate;
				font-size: 18;
				font-weight: bold;
				color: salmon;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
				width: 150px;
				border: 1px salmon solid;
				margin-top: 10px;
				margin-bottom: 15px;
			}
		
			.div1 {
				margin: 15px;
		
			}
			
			.button1{
				
				width: 100px;
				height: 40px;
				background-color: #FA8072;
				border: 1px sandybrown solid;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
			}
			.button1:hover{
				transform: scale(1.2);
				  transition:all 0.5s ease-in-out ;
				  background-color: antiquewhite;
				  cursor: pointer;
			}
			
			
		
			* {
				margin: 0;
				padding: 0;
			}
		
			.bg {
				background-color: #f4f5f9;
				width: 100px;
				border: 1px solid darkgray;
				display: none;
				position: absolute;
				box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);
				z-index: 1000;
		
			}
		
			.bg ul {
				list-style-type: none;
				text-align: center;
				line-height: 40px;
			}
		
			.bg li:hover {
				cursor: pointer;
		
				background: #eee;
				color: #CC1A1A;
			}
		</style>
	</head>
	<body>
		
		<div align="center" id="container">
		
		<div class="bg" id="bg">
			<ul>
				<li>進入相冊</li>
				<li>删 除</li>
				<li>修 改</li>
				<li>****</li>
			</ul>
		</div>
		
		
		<h1 align="center">相冊</h1>
		<div id="image" align="center">
		
			<div class="div1">
				<p class="p1">title1</p>
				<img data-original="./a.jpg" class='album lazy' title="描述" />
			</div>
			<div class="div1">
				<p class='p1'>title2</p>
				<img data-original="./a.jpg" class='album lazy' title="描述1" />
			</div>
			<div class="div1">
				<p class='p1'>title3</p>
				<img data-original="./a.jpg" class='album lazy' title="描述2" />
			</div>
			<div class="div1">
				<p class='p1'>title4</p>
				<img data-original="./a.jpg" class='album lazy' title="描述3" />
			</div>
			<div class="div1">
				<p class='p1'>title5</p>
				<img data-original="./a.jpg" class='album lazy' title="描述4" />
			</div>
			<div class="div1">
				<p class='p1'>title6</p>
				<img data-original="./a.jpg" class='album lazy' title="描述5" />
			</div>
			<div class="div1">
				<p class='p1'>title7</p>
				<img data-original="./a.jpg" class='album lazy' title="描述6" />
			</div>
			<div class="div1">
				<p class="p1">title8</p>
				<img data-original="./a.jpg" class='album lazy' title="描述7" />
			</div>
			<div class="div1">
				<p class='p1'>title9</p>
				<img data-original="./a.jpg" class='album lazy' title="描述8" />
			</div>
		</div>
		
		<button class="button1" id="button1">添加新相冊</button>
		
		</div>
		
		

		
	</body>
</html>

需要的js

注意：你必須給圖檔設定一個height和width，或者在CSS中定義，否則可能會影響到圖檔的顯示

需要的jquery-3.4.1.js

連結：https://pan.baidu.com/s/1WwJNXa9-5csYVxG8vyghmA

提取碼：1234

需要的 lazyload.js

連結：https://pan.baidu.com/s/1_118DY8mIDUhJs8dsq5JGg

提取碼：1234

實作懶加載js代碼

将圖檔的真實路徑放在img的data-original屬性上。給img标簽增加一個自定義的類名如：lazyload，友善js調用。

<script src="./jquery-3.4.1.js"></script>
				<!-- 圖檔的延遲加載 -->
				<script src="./lazyload.js"></script>
				<script>
					
					
					$(function(){
						// 啟動  延遲加載
						$("img.lazy").lazyload({
						  placeholder : "./1.gif", //用圖檔提前占位
						    // placeholder,值為某一圖檔路徑.此圖檔用來占據将要加載的圖檔的位置,待圖檔加載時,占位圖則會隐藏
						  effect: "fadeIn", // 載入使用何種效果
						    // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
						  threshold: 200, // 提前開始加載
						    // threshold,值為數字,代表頁面高度.如設定為200,表示滾動條在離目标位置還有200的高度時就開始加載圖檔,可以做到不讓使用者察覺
						  container: $("#container"),  // 對某容器中的圖檔實作效果  就是最外層的div 設定id 為 container就行了 
						    // container,值為某容器.lazyload預設在拉動浏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖檔
						  failurelimit : 10 // 圖檔排序混亂時
						     // failurelimit,值為數字.lazyload預設在找到第一張不在可見區域裡的圖檔時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域内圖檔并沒加載出來的情況,failurelimit意在加載N張可見區域外的圖檔,以避免出現這個問題.
						}).removeClass("lazy");
					})
					
				</script>

這裡有如果使用 ajax 請求來評價的圖檔那麼需要将上面的代碼放入 ajax裡才能有效

還有就是首頁會有多個ajax 請求，是以要在每次ajax請求接口，渲染模闆後都重調用延遲加載

為了防止重複渲染使用 .removeClass(“lazy”); 将指定的 lazy 屬性删除這樣就隻會渲染一次

當然如果你在其他的地方還需要此lazy 屬性那麼就不要删除此屬性

預加載

1.什麼是預加載

資源預加載是另一個性能優化技術，我們可以使用該技術來預先告知浏覽器某些資源可能在将來會被使用到。

預加載簡單來說就是将所有所需的資源提前請求加載到本地，這樣後面在需要用到時就直接從緩存取資源。

2.為什麼要用預加載

在網頁全部加載之前，對一些主要内容進行加載，以提供給使用者更好的體驗，減少等待的時間。

否則，如果一個頁面的内容過于龐大，頁面加載是從上到下加載的此刻你翻到後面那麼頁面圖檔都是白色的我們可以使用預加載提前加載好這些圖檔

3.案例

需要的html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			#image {
				margin: 0 auto;
				padding: 10px;
				width: 80%;
				border: 1px salmon solid;
				/*開啟彈性布局*/
				display: flex;
				/*wrap：換行，第一行在上方。*/
				flex-wrap: wrap;
				/*或者使用 兩端對齊，項目之間的間隔都相等。*/
				justify-content: space-between;
			}

			.album {
				width: 150px;
				height: 150px;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
				animation: key1 3s infinite forwards alternate;
			}

			@keyframes key1 {
				0% {}

				20% {
					transform: translate(0px, -13px);

				}

				40% {
					transform: translate(0px, 15px);

				}

				100% {
					transform: translate(0px, 0px);

				}
			}


			.album:hover {

				animation: key 0.5s;

			}

			@keyframes key {
				0% {}

				100% {
					transform: scale(1.2);

				}
			}


			.p1 {
				animation: key 4s infinite forwards alternate;
				font-size: 18;
				font-weight: bold;
				color: salmon;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
				width: 150px;
				border: 1px salmon solid;
				margin-top: 10px;
				margin-bottom: 15px;
			}

			.div1 {
				margin: 15px;

			}

			.button1 {

				width: 100px;
				height: 40px;
				background-color: #FA8072;
				border: 1px sandybrown solid;
				box-shadow: 1px 1px 5px silver;
				border-radius: 10px;
			}

			.button1:hover {
				transform: scale(1.2);
				transition: all 0.5s ease-in-out;
				background-color: antiquewhite;
				cursor: pointer;
			}



			* {
				margin: 0;
				padding: 0;
			}

			.bg {
				background-color: #f4f5f9;
				width: 100px;
				border: 1px solid darkgray;
				display: none;
				position: absolute;
				box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2);
				z-index: 1000;

			}

			.bg ul {
				list-style-type: none;
				text-align: center;
				line-height: 40px;
			}

			.bg li:hover {
				cursor: pointer;

				background: #eee;
				color: #CC1A1A;
			}
		</style>
	</head>
	<body>

		<div align="center" id="container">

			<div class="bg" id="bg">
				<ul>
					<li>進入相冊</li>
					<li>删 除</li>
					<li>修 改</li>
					<li>****</li>
				</ul>
			</div>


			<h1 align="center">相冊</h1>
			<div id="image" align="center">

				<div class="div1">
					<p class="p1">title1</p>
					<img src="" class='album ' title="描述" />
				</div>
				<div class="div1">
					<p class='p1'>title2</p>
					<img src="" class='album ' title="描述1" />
				</div>
				<div class="div1">
					<p class='p1'>title3</p>
					<img src="" class='album ' title="描述2" />
				</div>
				<div class="div1">
					<p class='p1'>title4</p>
					<img src="" class='album ' title="描述3" />
				</div>
				<div class="div1">
					<p class='p1'>title5</p>
					<img src="" class='album ' title="描述4" />
				</div>
				<div class="div1">
					<p class='p1'>title6</p>
					<img src="" class='album ' title="描述5" />
				</div>
				<div class="div1">
					<p class='p1'>title7</p>
					<img src="" class='album ' title="描述6" />
				</div>
				<div class="div1">
					<p class="p1">title8</p>
					<img src="" class='album ' title="描述7" />
				</div>
				<div class="div1">
					<p class='p1'>title9</p>
					<img src="" class='album ' title="描述8" />
				</div>
			</div>

			<button class="button1" id="button1">添加新相冊</button>

		</div>


	</body>
</html>

需要的js

需要的jquery-3.4.1.js

連結：https://pan.baidu.com/s/1WwJNXa9-5csYVxG8vyghmA

提取碼：1234

yujiaz.js

連結：https://pan.baidu.com/s/15M1TTtXemMCNtjm2zSeNGA

提取碼：1234

實作預加載js代碼

<script src="./jquery-3.4.1.js"></script>
		<!-- 圖檔的延遲加載 -->
		<script src="./yujiaz.js"></script>
		<script>
			var imgs = ["./1.gif", "./a.jpg"];

			$.preload(imgs, { // imgs: 圖檔數組或字元串 ['1.jgp', '2.jpg'] 或者 '1.jpg'
				order: 'ordered', // 預設無序加載
				each: function(count) {
					// 單個圖檔加載完成
				},
				all: function() {
					// 所有圖檔加載完成
					console.log("所有圖檔加載完成")
					
					//方式1
					
					// for (var i = 0; i < imgs.length; i++) {

					// 	var str = "<div class='div1'> \
					// 			<p class='p1'> Title" +i + "</p> \
					// 			<img src=" + imgs[i] +" class='album ' width='100' height='100' /> \
					// 			</div>"

					// 	$("#image").append(str)
					// }

				//方式1
					//index是下标 , element是對象
					$(".album").each(function(index, element) {

						$(element).attr("src", imgs[0])

					})

				}
			});
		</script>

自己感受下效果就能發現所有的圖檔是同時加載好的而不是一張一張的加載

懶加載與預加載的對比

懶加載也叫延遲加載：JS圖檔延遲加載,延遲加載圖檔或符合某些條件時才加載某些圖檔。

預加載：提前加載圖檔，當使用者需要檢視時可直接從本地緩存中渲染。

差別：

兩種技術的本質：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對伺服器前端有一定的緩解壓力作用，預加載則會增加伺服器前端壓力。

懶加載意義：

懶加載的主要目的是作為伺服器前端的優化，減少請求數或延遲請求數。

預加載意義:

預加載可以說是犧牲伺服器前端性能，換取更好的使用者體驗，這樣可以使使用者的操作得到最快的反映。

什麼時候使用懶加載什麼時候使用預加載呢?

當頁面圖檔特别多的時候而且頁面也特别長比如京東淘寶這些首頁圖檔少說都幾千張如果你全部都加載完那麼等的花都謝了

這時候可以使用懶加載來隻加載可視圖或者靠近可視區的圖檔這樣就大大的加快了通路的速度

當頁面圖檔不是特别多的時候為了使用者的體驗效果我們可以使用預加載比如從淘寶進入到店鋪裡看某件商品介紹的時候切換的過程中就把該介紹頁面的所有圖檔都加載完成了進去後無需等待

總結: 目前頁面圖檔特别多的話就使用懶加載圖檔不是很多的話就使用預加載

點贊 -收藏-關注-便于以後複習和收到最新内容有其他問題在評論區讨論-或者私信我-收到會在第一時間回複如有侵權，請私信聯系我感謝,配合,希望我的努力對你有幫助^_^

Jquery圖檔懶加載和預加載Jquery圖檔懶加載和預加載

Jquery圖檔懶加載和預加載

懶加載

1.什麼是懶加載

2.為什麼要用懶加載

3.懶加載的原理

4.案例

需要的HTML

需要的js

實作懶加載js代碼

預加載

1.什麼是預加載

2.為什麼要用預加載

3.案例

需要的html

需要的js

實作預加載js代碼

懶加載與預加載的對比

繼續閱讀

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

underscore模闆功能的使用和學習

vue3 transitionvue3 transition元件和vue2 transition元件

JQuery--dom捕獲html元素

CSS之折疊菜單

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件階段

jquery_126_demo

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

layui多任務上傳添加進度條