引言
在當今快節奏的網際網路環境中，頁面載入速度是決定使用者體驗與留存的關鍵因素之一。特別是對於影象豐富的網頁，大量的圖片載入往往會拖慢頁面初次呈現的時間。為解決這一挑戰，圖片懶載入技術應運而生，它能夠顯著提升頁面響應速度，最佳化使用者體驗。本文將系統地介紹圖片懶載入的概念、原理，並透過實際的程式碼示例，引導你掌握如何利用JavaScript實現這一最佳化策略。
一、圖片懶載入基礎
定義：圖片懶載入是一種延遲載入技術，即僅在圖片即將進入使用者視野時纔開始載入，而非頁面載入時立即載入所有圖片。
優勢：減少首屏載入時間，節省流量，提升頁面響應速度。
二、瀏覽器載入機制概覽
DOM構建：瀏覽器解析HTML，構建文件物件模型(DOM)。
CSSOM構建：下載並解析CSS，構建CSS物件模型(CSSOM)。
渲染流程：DOM與CSSOM合併成渲染樹，進行佈局與繪製。
資源載入：圖片等外部資源非同步載入。
三、為何採用圖片懶載入
首屏加速：優先載入可視區域內容，快速呈現核心資訊。
節約資源：避免載入未檢視的圖片，節省使用者流量。
效能最佳化：減輕伺服器壓力，提高網站整體效能。
四、實現步驟與程式碼示例
HTML結構調整
首先，為圖片標籤使用data-src屬性儲存圖片URL，而非傳統的src屬性。 因為傳統的src屬性在html載入的時候，會直接載入，不可控，如果在載入頁面的時候同時載入上百張圖片，不僅不會阻塞tcp/ip的數據傳輸，還會影響使用者的體驗。
對比一下data-src與src的區別
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="http://hbimg.huaban.com/d6beb51da15d69314038b6b79f56b7f6a57e2166137562-ErHeYF"> <img src="http://hbimg.huaban.com/e5df7a7e21cadf899be1c959d32d0ec0ad3c6ae9115241-Jpyztp"> <img src="http://hbimg.huaban.com/65d525a7b29a468c27d4ea61c0c6d47b0b3fc1ce15e986-FRa0vZ"> <img src="http://hbimg.huaban.com/b6220b7dcc6ff85d93118817ba7bab086290fda042f91-UjkM9z"> <img src="http://hbimg.huaban.com/666d8ccf68eb788d5dbb110d9d6afa1876f21a1e160da9-hF5UUE"> </body> </html>
在這裏放五張圖片，直接使用src屬性，會全部生成 
如果使用data-src
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
img{
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-src="http://hbimg.huaban.com/d6beb51da15d69314038b6b79f56b7f6a57e2166137562-ErHeYF">
<img data-src="http://hbimg.huaban.com/e5df7a7e21cadf899be1c959d32d0ec0ad3c6ae9115241-Jpyztp">
<img data-src="http://hbimg.huaban.com/65d525a7b29a468c27d4ea61c0c6d47b0b3fc1ce15e986-FRa0vZ">
<img data-src="http://hbimg.huaban.com/b6220b7dcc6ff85d93118817ba7bab086290fda042f91-UjkM9z">
<img data-src="http://hbimg.huaban.com/666d8ccf68eb788d5dbb110d9d6afa1876f21a1e160da9-hF5UUE">
</body>
</html>
就不會載入，這就是懶載入的關鍵，減少不必要的程序，降低伺服器和頁面的荷載。 
JavaScript實現
獲取圖片元素
監聽滾動事件
判斷圖片是否可視
動態載入圖片 話不多說，直接上程式碼，如果有不清楚的部分可以藉助ai來幫助理解方法和函式
const imgs = document.getElementsByTagName('img');
const num = imgs.length;
let n = 0;
document.addEventListener('DOMContentLoaded',()=>{
loadImage()
});
function loadImage(){
console.log('haha');//新增一個輸出來檢視函式的執行次數
// 是否在可視區
let screenHeight = document.documentElement.clientHeight;//一屏的高度
//捲軸
//不同瀏覽器的相容性問題
let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
for(let i =0;i<num;i++){
// console.log(imgs[i].offsetTop);
if(imgs[i].offsetTop <screenHeight+scrollTop){
//資料屬性
//console.log(imgs[i].dataset.src,imgs[i].dataset.price);
imgs[i].src = imgs[i].getAttribute('data-src');
n = i + 1 ;
if(n === num){
window.removeEventListener('scroll',throttleLayLoad);
}
}
}
}
const throttleLayLoad = _.throttle(loadImage,300);
window.addEventListener('scroll',throttleLayLoad);
節流函式：這裏使用了Lodash的
_.throttle函式來限制loadVisibleImages函式的執行頻率，避免滾動時頻繁觸發載入邏輯。如果不新增的話，在每一個單位時間就會計算一次
這是新增函式後的執行次數，有明顯的減少，如果不滿足還可以自己來設定執行的頻率
