如何深入理解JavaScript中的懶加載

載說明：原創不易，未經授權，謝絕任何形式的轉載

懶加載是一種延遲加載非必要內容的方法，直到用戶需要查看它為止。與其他加載方法不同，其他加載方法在訪問頁面時同時加載所有網站資源，而懶加載采取更加謹慎的方式。它延遲顯示某些元素，如圖片、視頻和其他多媒體，直到用戶主動與網頁進行交互。本文將向您展示如何使用懶加載，以便您的用戶在訪問您的網站時獲得更好的體驗。

介紹

網絡用戶對網站加載時間和性能有很高的期望。加載緩慢的網站可能會增加跳出率并讓用戶感到不滿意。為了應對這一挑戰，開發人員不斷尋求不同的技術來提高速度和整體用戶體驗，其中一種方法就是“懶加載”。為了實現懶加載，開發人員使用JavaScript。通過使用JavaScript，Web開發人員可以控制特定元素從服務器獲取和渲染到用戶屏幕的時間和方式。本文將探討懶加載的好處、實施方法、對Web性能的影響、挑戰和最佳實踐。

懶加載的好處

減少帶寬使用：加載不必要的資源會消耗大量帶寬，影響用戶和網站所有者。延遲加載可以通過僅加載所需資源來節省帶寬。對于可能不會向下滾動查看整個頁面的訪問者來說，這將變得有益，因為它可以幫助防止他們超出每月限額。
提高頁面速度得分和增強SEO性能：搜索引擎將頁面速度視為排名因素之一。通過改善加載時間，延遲加載對Google的PageSpeed等各種工具測量的頁面速度得分產生積極影響。更高的頁面速度得分改善了SEO，并有助于提高用戶留存率和轉化率。
減少服務器負載：通過按需獲取資源，它有助于更高效地分配服務器負載。它減輕了服務器壓力，使其能夠處理更多的用戶請求。
改進的交互時間(TTI)：交互時間測量網頁完全交互所需的時間，允許用戶與按鈕、鏈接和其他元素進行交互。通過優先加載重要內容，惰性加載有助于減少TTI，為用戶提供更愉悅的瀏覽體驗。
優化移動瀏覽和改善用戶體驗：移動設備通常具有有限的處理能力和網絡功能。通過采用延遲加載，網站適應這些限制，提供更流暢的體驗并減少數據消耗，使其更適合移動設備。用戶可以快速與可見內容交互，而無需等待屏幕外資源加載。

JavaScript中實現延遲加載的技術

在JavaScript中，可以通過不同的方法實現延遲加載。然而，兩種廣泛使用的技術是使用Intersection Observer API來延遲加載圖像，以及在滾動事件中實現內容的延遲加載。讓我們通過示例來探討這兩種技術，以了解它們的工作原理：

1、使用Intersection Observer API進行圖片的懶加載

Intersection Observer API是一個JavaScript API，允許開發人員觀察元素與特定祖先或視口的交叉變化。它跟蹤目標元素的可見性，并在元素進入或離開視圖時通知開發人員。它非常適用于延遲加載圖像，因為它在圖像進入或離開視口時通知我們，從而允許我們根據需要加載圖像。它在一個單獨的線程上運行，不會阻塞主JavaScript線程。該API不僅限于圖像，還可以用于延遲加載任何內容，例如視頻、iframe甚至是生成的頁面部分。

多個Intersection Observers可以同時觀察同一頁上的不同元素。例如，假設您有一個頁面上有多個圖像，并且希望在用戶向下滾動頁面時延遲加載這些圖像。下面是如何使用Intersection Observer API和原生JavaScript實現延遲加載的方法。要開始，請確保您有一個基本的HTML結構，其中包含帶有 img 標簽的 data-src 屬性，指定圖像的實際源URL。我們將使用 data-src 來存儲圖片的URL，而不是使用傳統的 src 屬性來實現圖片的懶加載。

<!DOCTYPE html>
<html>
<head>
 <title>Lazy Loading Images</title>
</head>
<body>
 <h1>Lazy Loading Images Example</h1>
 <img class="lazy" data-src="image1.jpg" alt="Image 1">
 <img class="lazy" data-src="image2.jpg" alt="Image 2">
 <!-- Add more images with the "lazy" class and "data-src" attribute -->
</body>
</html>

在我們的JavaScript代碼中，我們將創建一個Intersection Observer的實例，并指定一個回調函數，每當觀察的元素進入或離開視口時，該函數將被觸發。

// Get all elements with the "lazy" class
const lazyImages=document.querySelectorAll(".lazy");
// Create a new Intersection Observer
const observer=new IntersectionObserver((entries, observer)=> {
 entries.forEach((entry)=> {
  if (entry.isIntersecting) {
   // Load the image when it comes into the viewport
   entry.target.src=entry.target.dataset.src;
   observer.unobserve(entry.target); // Unobserve the image after it's loaded
  }
 });
});
// Observe each lazy image
lazyImages.forEach((image)=> {
 observer.observe(image);
});

在上面的代碼中，首先使用 document.querySelectorAll(".lazy") 選擇所有具有“lazy”類的元素。然后，我們創建一個新的Intersection Observer實例，傳入一個回調函數，每當觀察的元素（在這種情況下是懶加載的圖片）進入或退出視口時觸發。當觀察到一張圖片并進入視口時（即 entry.isIntersecting 為真），我們將其 src 屬性設置為 data-src 的值，該值保存了實際的圖片URL。這個操作觸發了圖片的懶加載。然后，我們調用 observer.unobserve(entry.target) 來停止觀察圖片一旦加載完成以優化性能。

2. 滾動事件上的懶加載內容:

基于滾動事件的方法可以實現高度定制的懶加載實現。您可以完全控制內容何時以及如何加載，使其適用于需要在元素可見時執行特定任務或轉換的場景。滾動事件是JavaScript的一個特性，被所有現代瀏覽器支持。這意味著您不必擔心兼容性問題。

對于單頁應用程序，其中內容隨著用戶瀏覽網站而加載，使用滾動事件可能更直觀。與Intersection Observer API最適合圖像和特定元素不同，基于滾動事件的懶加載提供了更多的靈活性。您可以將其應用于任何內容或復雜組件，這些內容可能不適合“在視圖中”的概念。讓我們看一個例子。在這里，您將再次擁有一個基本的HTML結構，其中包含要惰性加載的元素。但是，這次我們不需要像 data-src 這樣的特殊屬性。

<!DOCTYPE html>
<html>
<head>
 <title>Lazy Loading Content on Scroll</title>
</head>
<body>
 <h1>Lazy Loading Content Example</h1>
 <div class="lazy-content">
  <p>Some content to be lazily loaded...</p>
 </div>
 <div class="lazy-content">
  <p>More content to be lazily loaded...</p>
 </div>
 <!-- Add more elements with the "lazy-content" class -->
</body>
</html>

在我們的JavaScript代碼中，你將會有一個函數 isElementInViewport(element) ，它會檢查一個元素是否在視口中，然后定義一個 lazyLoadContent() 函數，該函數使用 document.querySelectorAll(".lazy-content") 遍歷所有具有“lazy-content”類的元素。

// Function to check if an element is in the viewport
function isElementInViewport(element) {
 const rect=element.getBoundingClientRect();
 return (
  rect.top >=0 &&
  rect.left >=0 &&
  rect.bottom <=(window.innerHeight || document.documentElement.clientHeight) &&
  rect.right <=(window.innerWidth || document.documentElement.clientWidth)
 );
}
// Function to lazily load content
function lazyLoadContent() {
 const lazyContentElements=document.querySelectorAll(".lazy-content");
 lazyContentElements.forEach((element)=> {
  if (isElementInViewport(element)) {
   // Add your logic to load the content for the element here
   element.classList.add("loaded");
  }
 });
}
// Attach the lazyLoadContent function to the scroll event
window.addEventListener("scroll", lazyLoadContent);
// Call the function initially to load the visible content on page load
lazyLoadContent();

對于每個元素，它使用 isElementInViewport(element) 檢查它是否在視口中，如果為真，則加載該元素的內容。在這個例子中，我們只是給元素添加一個類名“loaded”，但你可以根據你的使用情況自定義這部分。然后，我們使用 window.addEventListener("scroll", lazyLoadContent) 將 lazyLoadContent() 函數附加到滾動事件上。這確保了每當用戶滾動頁面時都會調用該函數。此外，我們在頁面加載時調用 lazyLoadContent() 來加載可見內容。

何時使用懶加載

對于網頁開發人員來說，知道何時實施延遲加載是很重要的。明智地使用它以最大化其效果并避免潛在的缺點是至關重要的。延遲加載是那些嚴重依賴圖片的網站必備的優化功能，比如在線作品集、電子商務平臺和攝影網站。這些網站通常展示大量高分辨率的圖片，這些圖片會顯著影響初始頁面加載時間。

通過延遲加載圖片，只有用戶視口內或可見區域的圖片會最先加載。利用無限滾動或分頁來展示大量內容的網頁可以從延遲加載中受益。帶有交互元素和小部件（如滑塊、輪播圖和手風琴）的頁面也可以利用延遲加載?？缍鄠€頁面的長文章或博客文章也可以從延遲加載中受益。與預加載所有頁面不同，延遲加載可以在用戶滾動到當前頁面末尾時獲取和加載后續頁面。具有資源密集型功能的網站，例如交互式地圖、數據可視化和復雜動畫，可以使用延遲加載來優化性能。

懶加載的挑戰

雖然JavaScript中的懶加載有助于提高網頁性能，但也面臨一些挑戰。與懶加載相關的一些挑戰包括：

JavaScript 依賴：延遲加載依賴 JavaScript 來獲取和加載所需資源。然而，并非所有用戶的瀏覽器都啟用了 JavaScript。在這種情況下，延遲加載的內容可能無法加載，從而給部分用戶帶來糟糕的用戶體驗。
復雜的實現：實現延遲加載可能變得復雜，特別是在具有復雜結構和各種類型資源的網站上。管理多個延遲加載元素，確保它們在正確的時間加載，并處理交互可能具有挑戰性。
管理圖像尺寸：在響應式設計中，懶加載圖像在處理不同屏幕尺寸和分辨率時可能會變得具有挑戰性。

最佳實踐

開發人員應遵循最佳實踐，以充分發揮JavaScript中的延遲加載的潛力。在將延遲加載應用于網站之前，要確定應立即加載的重要內容，以創建良好的用戶體驗。讓我們來看一些實施延遲加載的最佳實踐：

優化圖像和媒體文件：為了優化圖像的懶加載，使用適當的圖像格式并在不損失質量的情況下進行壓縮。使用 srcset 和 sizes 屬性實現響應式圖像，根據用戶的視口提供不同的圖像尺寸，節省帶寬。
使用占位元素：為了防止內容移動和布局不穩定，使用占位元素來保留懶加載內容的空間。可以使用占位圖像或簡單的占位符，比如具有定義尺寸和背景顏色的div元素，以保持布局直到實際內容加載完成。
實現Intersection Observer API：Intersection Observer API是一種簡化懶加載實現的JavaScript功能。它允許開發人員高效地跟蹤元素何時進入視口，從而觸發懶加載內容的加載。
為JavaScript禁用的用戶提供備選方案：并非所有用戶都在其瀏覽器中啟用了JavaScript。為了滿足這些用戶的需求，為延遲加載的內容提供備選解決方案。例如，使用 <noscript> 標簽來包含延遲加載圖像和媒體的靜態版本。這樣可以確保禁用JavaScript的用戶仍然可以訪問重要內容，并保持良好的用戶體驗。
處理錯誤：延遲加載有時可能會導致錯誤，例如損壞的圖像URL或資源加載失敗。實現錯誤處理以優雅地處理這些情況。用適當的占位符替換損壞或缺失的圖像，并將錯誤記錄到控制臺以進行調試。錯誤處理有助于為用戶提供無縫體驗，并幫助開發人員識別和解決問題。
保持懶加載輕量化：避免過度加載網頁，限制僅對顯著影響頁面加載時間的元素進行懶加載。
在各種設備、瀏覽器和網絡速度上徹底測試：在將懶加載應用到實際網站之前，請在各種設備、瀏覽器和網絡速度上徹底測試其實施。在臺式機、筆記本電腦、平板電腦和智能手機上進行測試，以確保行為和響應性的一致性。
在將圖像插入DOM之前，異步解碼圖像，這樣可以防止瀏覽器在圖像加載時凍結。

結束

懶加載是一種使網站更快、更易于使用的方法。它通過等待在需要時再加載不重要的內容來實現。這意味著您可以更快地看到頁面并使用更少的數據。在JavaScript中實現懶加載時，瀏覽器的兼容性是另一個需要考慮的因素。雖然許多現代瀏覽器支持懶加載所需的功能和API，但舊版本的瀏覽器可能缺乏支持或功能有限。因此，開發人員必須注意他們想要支持的瀏覽器，并相應選擇適當的技術。本文介紹了懶加載的好處、技術、挑戰和最佳實踐，為現代網頁開發中懶加載的潛力提供了啟示。

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。

言

圖片懶加載也是比較常見的一種性能優化的方法，最近在用vue做一個新聞列表的客戶端時也用到了，這里就簡單介紹下實現原理和部分代碼。

實現原理

加載頁面的時候，圖片一直都是流量大頭，針對圖片的性能方法也挺多的比如base64、雪碧圖等；懶加載也是其中一種，主要原理是將非首屏的圖片src設為一個默認值，然后監聽窗口滾動，當圖片出現在視窗中時再給他賦予真實的圖片地址，這樣可以保證首屏的加載速度然后按需加載圖片。

具體代碼

首先在渲染時，圖片引用默認圖片，然后把真實地址放在data-*屬性上面。

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

然后是監聽滾動，直接用window.onscroll就可以了，但是要注意一點的是類似于window的scroll和resize，還有mousemove這類觸發很頻繁的事件，最好用節流(throttle)或防抖函數(debounce)來控制一下觸發頻率。underscore和lodash里面都有封裝這兩個方法，這里先不多做介紹了。

接著要判斷圖片是否出現在了視窗里面，主要是三個高度：1，當前body從頂部滾動了多少距離。2，視窗的高度。3，當前圖片距離頂部的距離。offsetTop相關屬性可以參考這里，具體代碼如下：

window.onscroll=_.throttle(this.watchscroll, 200);

watchscroll () {

var bodyScrollHeight=document.body.scrollTop;// body滾動高度
var windowHeight=window.innerHeight;// 視窗高度
var imgs=document.getElementsByClassName('lazyloadimg');
for (var i=0; i < imgs.length; i++) {
var imgHeight=imgs[i].offsetTop;// 圖片距離頂部高度
if (imgHeight < windowHeight + bodyScrollHeight) {
imgs[i].src=imgs[i].getAttribute('data-src');
img[i].className=img[i].className.replace('lazyloadimg','')
}
}
}
學習交流加群：230354270

結語

大概內容就這么多了，下次可能會補充一下防抖節流源碼的實現。最后再補充兩個常見的滾動判斷：

1.頁面滾動離開首屏(這時可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight

2.頁面滾動到底部了(這時可去調接口獲取更多內容)：window.scrollY + window.innerHeight > document.body.offsetHeight

于一些擁有大量圖片的網站來說，如果一個頁面有超過 50 張圖片，就會造成網站頁面加載太慢以及移動端耗費流量太大。就像前幾天給理想做的作品頁面，頁面上至少200張圖，為了解決這樣的問題，可以使用LazyLoad按需加載，又稱懶加載。

LazyLoad按需加載

做個筆記，圖片如何實現懶加載（LazyLoad按需加載）

什么是LazyLoad按需加載

LazyLoad按需加載采用圖片按需加載技術，打開頁面時只會加載首屏圖片。訪客往下滾動時才會陸續加載需要展現的圖片，這樣非常高效，體驗舒適。

做個筆記，圖片如何實現懶加載（LazyLoad按需加載）

LazyLoad按需加載實現方法

我們在自己做網站時，也可以實現LazyLoad按需加載，增強網站的用戶體驗。下面學做網站論壇就來介紹一下LazyLoad按需加載實現方法。（以下會使用到HTML代碼，如果對代碼不熟悉，可以學習一下html視頻教程）

引入LazyLoad按需加載必須的二個文件：jquery.js和jquery.lazyload.js。引入方法很簡單，只需將下面的代碼放到</head>標簽上方即可；

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>

做個筆記，圖片如何實現懶加載（LazyLoad按需加載）

網站上所有圖片都使用以下的格式書寫：

<img class="lazy" src="" data-original="圖片地址" width="100" height="100" alt="">

做個筆記，圖片如何實現懶加載（LazyLoad按需加載）

在網站的</body>標簽上面，放上以下的JS代碼，來實現LazyLoad按需加載（懶加載）；

<script type="text/javascript">$(function() { $("img.lazy").lazyload({ threshold : 200, // 設置閥值 effect : "fadeIn" // 設置圖片漸入特效 });});</script>

做個筆記，圖片如何實現懶加載（LazyLoad按需加載）

這樣，我們自己在建網站時，也可以輕松實現LazyLoad按需加載（懶加載）了?？烊プ约旱木W站上試試吧！

在線咨詢

上一篇：只管來龍華買！這項補貼名額多多，最高達20000元
下一篇：JS的封裝

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何深入理解JavaScript中的懶加載

介紹

懶加載的好處

JavaScript中實現延遲加載的技術

1、使用Intersection Observer API進行圖片的懶加載

2. 滾動事件上的懶加載內容:

何時使用懶加載

懶加載的挑戰

最佳實踐

結束

言

實現原理

結語

LazyLoad按需加載

您的項目需求

1、使用Intersection Observer API進行圖片的懶加載