lazyLoad-懶加載

原創 learning_H 2020-03-07 02:46

懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。用戶滾動到它們之前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些情況下，它還可以幫助減少服務器負載。

適用場景：商城網站或者圖片很多的其他展示性網站中。

那使用懶加載的優點有哪些呢？

  • 能提升用戶的體驗。
  • 減少無效資源的加載，減小服務器和瀏覽器的負擔。
  • 防止併發加載的資源過多而導致阻塞JS的加載。

原理

那麼我們會經常把src的屬性設置爲空字符串，或者一個其他的靜態圖片，而圖片的真實路徑則設置在自定義屬性中去，比如 data-src。然後監聽頁面的滾動事件，在滾動事件的回調函數中，判斷我們的懶加載的圖片是否進入可視區域。如果進入到可視區域，就把src的值設置爲 data-src的值，從而實現懶加載的效果。

示例代碼

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>lazy</title>
	<style type="text/css">
		img {
			display: block;
			width: 104px;
			height: 144px;
		}
	</style>
</head>
<body>
	<div class="lazyObj">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
		<img src="" data-src="https://user-gold-cdn.xitu.io/2017/12/13/1604f3080efffc24?imageView2/1/w/104/h/144/q/95/format/webp/interlace/1">
	</div>
</body>
</html>
<script type="text/javascript">
	
	// 獲取可視區域的高度
	var viewHeight = document.documentElement.clientHeight;

	function lazy() {
		// 獲取所有的Img標籤
		var lazyImg = document.getElementsByTagName('img');

		// 這裏打印出來的lazyImg是一個obj，所以不能直接使用 forEach 方法
		// console.log(typeof lazyImg)

		// 循環數組,將Array的forEach方法用到 lazyImg 上去
		// 簡寫 [].forEach.call(...)
		Array.prototype.forEach.call(lazyImg, function(item, index) {
			// 定義一個變量來用作判斷是否進到可視區域的範圍
			let rect;
			if (item.dataset.src === "" || item.dataset.src === undefined) return;

			// 用於獲得頁面中某個元素的左，上，右，下分別相對於瀏覽器視窗的位置
			rect = item.getBoundingClientRect();

			// 判斷圖片位置是否進入到了可視區域
			if (rect.bottom >= 0 && rect.top < viewHeight) {
				item.src = item.dataset.src;
				item.removeAttribute("data-src");
			}
 		})
	}

	// 這裏也需要給scroll事件放一個函數節流來減少性能損耗
	function throttle (fn, time) {
		let flag = true;
		return function () {
			if (!flag) return;
			flag = false;
			setTimeout(() => {
				fn.apply(this, arguments);
				flag = true;
			}, time)
		}
	}

	lazy();
	window.addEventListener('scroll', throttle(lazy, 300));
</script>
封裝版本
  1. 在上述代碼塊基礎上進行封裝–有優化空間

使用此方法，會在調用時，多次獲取DOM節點，尤其是在 scroll 這種高頻觸發的事件中，會消耗瀏覽器性能，且在使用節流時，得再包裹一層中間層，否則無法傳遞參數

優化建議：

如果是固定的元素節點，可以把獲取DOM部分也設爲一個常量；但如果是動態加載，則還是需要動態去獲取DOM節點。

// 獲取可視區域的高度
var viewHeight = document.documentElement.clientHeight;
function lazy(selector, type) {
	// 獲取所有的Img標籤
	var lazyImg = document.querySelectorAll(selector);

	// 這裏打印出來的lazyImg是一個obj，所以不能直接使用 forEach 方法
	// console.log(typeof lazyImg)

	// 循環數組,將Array的forEach方法用到 lazyImg 上去
	Array.prototype.forEach.call(lazyImg, function(item, index) {
		// 定義一個變量來用作判斷是否進到可視區域的範圍
		let rect;
		if (item.dataset.src === "" || item.dataset.src === undefined) return;

		// 用於獲得頁面中某個元素的左，上，右，下分別相對於瀏覽器視窗的位置
		rect = item.getBoundingClientRect();

		// 判斷圖片位置是否進入到了可視區域
		if (rect.bottom >= 0 && rect.top < viewHeight) {
			item.src = item.dataset.src;
			item.removeAttribute(type);
		}
 	})
}

// 這裏也需要給scroll事件放一個函數節流來減少性能損耗
function throttle (fn, time) {
	let flag = true;
	return function () {
		if (!flag) return;
		flag = false;
		setTimeout(() => {
			fn.apply(this, arguments);
			flag = true;
		}, time)
	}
}

// 使用此種傳參方式，得再包一層
lazy('img[data-src]', 'data-src');

// 中間層
function lazyLoad () {
	lazy('img[data-src]', 'data-src');
}

window.addEventListener('scroll', throttle(lazyLoad, 300));

// 測試耗時 43.331298828125ms
  1. 使用類和單例模式進行封裝

此方法，將高度，選擇器，加載屬性都定義在了構造方法裏，並且使用單例模式，確保只初始化一個實例，之後的 onscroll 事件裏，只需要調用 init 方法即可。

可優化的點：

將循環後已經加載出來的的元素節點刪除掉，可提高下次循環效率

class Lazy {
	constructor (selector, type) {
		this.selector = selector;
		this.type = type;
		// 獲取可視區域的高度
		this.viewHeight = document.documentElement.clientHeight;
		// 獲取所有的Img標籤
		this.lazyImg = document.querySelectorAll(this.selector);
		this.init();
	}
	init () {
		// this 作用域
		let _this = this;
		// 循環數組,將Array的forEach方法用到 lazyImg 上去
		Array.prototype.forEach.call(_this.lazyImg, function(item, index) {
			// 定義一個變量來用作判斷是否進到可視區域的範圍
			let rect;
			if (item.dataset.src === "" || item.dataset.src === undefined) return;

			// 用於獲得頁面中某個元素的左，上，右，下分別相對於瀏覽器視窗的位置
			rect = item.getBoundingClientRect();

			// 判斷圖片位置是否進入到了可視區域
			if (rect.bottom >= 0 && rect.top < _this.viewHeight) {
				item.src = item.dataset.src;
				item.removeAttribute(_this.type);
			}
 		})
	}
}

// 使用單例模式
Lazy.getSelector = (function(){
	let instance;
	return function (selector, type) {
		if (!instance) {
			instance = new Lazy(selector, type);
		}
		return instance;
	}
})()

// 這裏也需要給scroll事件放一個函數節流來減少性能損耗
function throttle (obj, fn, time) {
	let flag = true;
	return function () {
		if (!flag) return;
		flag = false;
		setTimeout(() => {
			// fn();
			fn.apply(obj, arguments);
			// 這裏不能使用this，它會將作用域指向當前觸發事件的對象上去
			// fn.apply(this, arguments);
			flag = true;
		}, time)
	}
}



let lazy = Lazy.getSelector('img[data-src]', 'data-src');
window.addEventListener('scroll', throttle(lazy, lazy.init, 300));
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

「實戰應用」如何用DHTMLX將上下文菜單集成到JavaScript甘特圖中（一）

DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。 DHTMLX Gantt是一個高度可定製的工具，可以與項目管理應用程序所需的其他功能相補充。在本文

原創 2024-06-14 12:16:49

使用TypeScript創建高效HTTP代理請求

什麼是HTTP代理請求？ 首先，讓我們來了解一下什麼是HTTP代理請求。在網絡通信中，代理是一種充當中間人的服務器，它可以接收客戶端的請求並將其轉發給目標服務器，然後將目標服務器的響應返回給客戶端。而HTTP代理則是一種特殊的代理服務

原創 2024-06-13 00:05:09

Puppeteer實戰案例：自動化抓取社交媒體上的媒體資源

在當今數字化時代，社交媒體已成爲人們獲取信息、分享生活和進行商業推廣的重要平臺。隨着社交媒體內容的爆炸性增長，自動化抓取社交媒體上的媒體資源變得尤爲重要。本文將介紹如何使用Puppeteer這一強大的自動化工具來實現這一目標。 1. P

原創 2024-06-08 00:06:14

交互式流程圖組件DHTMLX Diagram v6.0 - 擁有更靈活的高度可定製功能

DHTMLX Diagram庫允許用幾行代碼構建JavaScript流程圖，通過自動佈局和實時編輯器，它可以更容易地將複雜數據可視化到一個整潔的層次結構中。 DHTMLX Diagram v6.0版本發佈，帶來了衆多令人興奮的新功能和改進，

原創 2024-06-04 12:32:11

Symfony Panther在網絡數據採集中的應用

引言 在當今數字化時代，網絡數據採集已成爲獲取信息的重要手段之一。Symfony Panther，作爲Symfony生態系統中的一個強大工具，爲開發者提供了一種簡單、高效的方式來模擬瀏覽器行爲，實現網絡數據的採集和自動化操作。本文將通過

原創 2024-06-04 02:45:28

Symfony Panther在網絡數據採集中的應用

引言 在當今數字化時代，網絡數據採集已成爲獲取信息的重要手段之一。Symfony Panther，作爲Symfony生態系統中的一個強大工具，爲開發者提供了一種簡單、高效的方式來模擬瀏覽器行爲，實現網絡數據的採集和自動化操作。本文將通過

原創 2024-06-04 02:45:12

界面控件DevExtreme v23.2 - 可訪問性、性能增強

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-06-03 12:21:39

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合*使您可以利用現代Web開發堆棧*包括React*Angular*ASP.NET Core*jQuery*Knockout等*構建交互式的Web應用程序。從Ang

原創 2024-05-31 12:32:20

網頁爬蟲開發：使用Scala和PhantomJS訪問知乎

引言 隨着大數據時代的到來，網頁爬蟲作爲一種高效的數據收集工具，被廣泛應用於互聯網數據抓取和信息抽取。而知乎是一個知識分享平臺，擁有大量的用戶生成內容。通過爬蟲獲取知乎數據，企業和研究人員可以進行深入的數據分析和市場研究，瞭解用戶的需求

原創 2024-05-31 00:11:23

「盤點」JetBrains IDEs v2024.1新功能一覽，更智能的開發體驗！

JetBrains IDEs日前正式發佈了v2024.1版本，此版本中最大的亮點就是帶來了AI賦能的全行代碼補全，同時在最新的IDEs中重做了終端、擁有更強大的代碼編輯和導航功能、更智能的代碼分析和提示、更優化的性能、更豐富的插件和集成等。

原創 2024-05-29 12:18:44

Objective-C爬蟲：實現動態網頁內容的抓取

在當今的互聯網時代，數據的獲取和分析變得日益重要。無論是進行市場研究、用戶行爲分析還是產品開發，獲取大量數據都是不可或缺的一環。然而，很多有價值的信息都隱藏在動態加載的網頁中，這些網頁通過JavaScript動態生成內容，傳統的爬蟲技術

原創 2024-05-29 00:07:51

音頻鏈接抓取技術在Lua中的實現

前言 隨着數字音樂的普及，越來越多的用戶選擇在線音樂平臺來享受音樂。網易雲音樂作爲國內領先的音樂服務平臺，不僅提供了豐富的音樂資源，還擁有獨特的社交屬性，吸引了大量的用戶。在衆多的音樂服務中，音頻鏈接的抓取技術成爲了一個重要的需求。無論

原創 2024-05-28 00:07:25

今天！通義靈碼在北京、成都、杭州三城開講啦

通義靈碼自從入職阿里雲以來備受行業關注。5 月 24 日，阿里雲工程師奔赴北京、成都、杭州三城，向企業和開發者介紹並演示通義靈碼，通義靈碼依然是大家話題的C位，並收穫了衆多粉絲。 @杭州 阿里雲金融創新峯會 今天，2024 阿里雲金融創新峯

原創 2024-05-27 21:13:46

響應式UI組件DevExtreme中文教程 - 工具欄的自適應模式

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-27 12:19:43

使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（三）

DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

原創 2024-05-27 12:19:39