懶加載是一種優化網頁加載時間的技術，它允許網頁在初次加載時只加載用戶可見區域（視口內）的圖像，而將其他圖像延遲加載直到用戶滾動到它們所在的位置。這不僅可以加快網頁的加載速度，還能節省帶寬。以下是實現圖像懶加載的幾種方法：
1. 使用HTML的loading屬性
HTML原生支持懶加載圖像，通過給<img>標籤添加loading="lazy"屬性即可實現。這是最簡單也是推薦的方法，因為它不需要額外的JavaScript代碼。
<img src="example.jpg" loading="lazy" alt="Example Image">
這種方法的好處是簡單易用，而且被現代瀏覽器廣泛支持。但是，如果需要在老舊瀏覽器上實現懶加載，可能還需要使用JavaScript。
2. 使用JavaScript實現懶加載
對於不支持loading="lazy"屬性的瀏覽器，你可以使用JavaScript來手動實現懶加載。以下是一個簡單的例子，使用IntersectionObserverAPI來觀察圖像是否進入視口：
<img class="lazyload" data-src="example.jpg" alt="Example Image">
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazyload"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazyload");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 備選方案：可以在這裡寫一個簡單的回退方案，比如直接加載所有圖像
// 或者使用getBoundingClientRect()結合滾動事件監聽器來實現懶加載
}
});
這個腳本首先檢查瀏覽器是否支持IntersectionObserver。如果支持，它會創建一個觀察者來監視所有具有lazyload類的圖像。一旦圖像進入視口，觀察者函數會將圖像的data-src屬性值賦給src屬性，從而觸發圖像的加載，並停止觀察該圖像。
3. 使用第三方庫
如果你希望使用更複雜的懶加載功能，或者需要更好的兼容性支持，也可以考慮使用第三方JavaScript庫，如Lozad.js、lazysizes等。
這些庫通常提供了更多的配置選項，能夠處理不僅是<img>標籤，還包括背景圖像、視頻等多種類型的媒體資源的懶加載，而且它們已經處理了各種兼容性問題。
無論採用哪種方法，懶加載都是提升網頁性能和用戶體驗的有效手段。你可以根據項目的需求和目標瀏覽器的支持情況來選擇最合適的實現方式。
發布者：彬彬筆記，轉載請註明出處：https://www.binbinbiji.com/zh-hant/html5/3210.html
