JavaScript 如何實作圖懶載入功能？

JavaScript 如何實作圖懶載入功能？

隨著行動網路的發展，網頁上的圖片數量越來越多，使得頁面載入速度變慢，使用者體驗下降。為了解決這個問題，圖片懶載入功能應運而生。圖片懶載入是指當使用者捲動到圖片位置時，再載入圖片，以提高網頁載入速度。本文將介紹如何使用 JavaScript 實作圖片懶載入功能，並提供具體的程式碼範例。

1. 首先，我們需要為要懶載入的圖片標記一個特定的屬性。在這個範例中，我們以 "data-src" 作為標記屬性，並將圖片的真實位址儲存在這個屬性中。

<img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Load Image">

2. 接下來，我們需要透過 JavaScript 監聽頁面捲動事件，並判斷圖片是否進入到視覺區域。

function lazyLoadImages() {
    var lazyImages = document.querySelectorAll('img[data-src]');
    
    lazyImages.forEach(function(img) {
        if(isElementInViewport(img)) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
}

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}

window.addEventListener('scroll', lazyLoadImages);
window.addEventListener('resize', lazyLoadImages);

3. 在瀏覽器滾動或調整視窗大小時，會觸發scroll 和resize 事件，我們可以在這兩個事件中呼叫lazyLoadImages 函數來判斷並載入圖片。
4. 最後，在頁面載入完成後立即執行一次 lazyLoadImages 函數，以便載入首屏可視區域內的圖片。

window.addEventListener('load', lazyLoadImages);

透過以上四個步驟，我們就可以實現圖片懶載入功能。當使用者捲動到圖片位置時，圖片會自動加載，從而提高頁面載入速度。

總結：
圖片懶載入是透過將圖片真實位址儲存在特定屬性中，透過監聽頁面滾動和調整視窗大小的事件來判斷圖片是否進入視覺區域，並根據判斷結果來加載圖片。這種技術在行動端和網路效能較差的環境中尤其重要，可提高使用者體驗和減輕伺服器負載。

以上是關於 JavaScript 如何實作圖片懶載入功能的介紹，並提供了對應的程式碼範例。希望對您有幫助！

以上是JavaScript 如何實作圖懶載入功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！