隨著移動設備和高清圖片的普及，圖片加載成為了網頁性能優化的一個重要方面。如果一次性加載所有圖片，會導致頁面加載速度緩慢，用戶體驗受到影響。為了解決這個問題，網頁開發人員們開始使用圖片懶加載技術。今天我們就來探討一下JS圖片懶加載的原理和應用。 懶加載技術是指在用戶滾動或者點擊時，對頁面中的圖片進行延遲加載。換言之，只有當用戶真正需要查看某一張圖片時，才會請求加載該圖片，這樣可以減輕頁面資源壓力，提高網頁性能。懶加載技術在很多大型網站（比如淘寶、京東等）得到了廣泛應用。 怎么實現JS圖片懶加載呢？首先，我們需要將每一個圖片的真實URL存在一個屬性（比如data-img-src）中，而不是直接寫在img標簽的src屬性中。當用戶滾動或者點擊時，就可以利用JS將每一個元素的data-src屬性的值賦值給src屬性。下面是一個簡單的代碼實現：

// 獲取需要懶加載的圖片
var lazyImgs = document.querySelectorAll("img.lazy");
// 遍歷每一張圖片
for (var i = 0; i< lazyImgs.length; i++) {
// 如果圖片在視口內，就把圖片的真實URL賦值給src屬性
if (isInViewport(lazyImgs[i])) {
lazyImgs[i].src = lazyImgs[i].dataset.imgSrc;
}
}
// 判斷圖片是否在視口內
function isInViewport(elem) {
var rect = elem.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top<= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left<= (window.innerWidth || document.documentElement.clientWidth)
);
}

上面的代碼演示了一個最簡單的懶加載實現，在當用戶滾動到某一個圖片時，如果該圖片在視口內，則將其真實URL賦值給src屬性。相信大家也能看得出來，這個代碼的缺陷是什么——如果網頁的圖片比較多，這種寫法會導致瀏覽器一下子請求很多圖片，反而會影響性能。因此，我們需要對這個代碼進行優化。 一種比較常見的優化方式是，只對頁面上的可見圖片進行懶加載。也就是說，如果一張圖片在用戶的視口外，那么不需要加載這張圖片；只有當圖片進入用戶的視線范圍之內時，才會開始請求加載該圖片。下面是一個改進版的代碼：

// 獲取需要懶加載的圖片
var lazyImgs = document.querySelectorAll("img.lazy");
// 在用戶滾動時，檢查每個圖片是否應該被加載
window.addEventListener("scroll", function() {
for (var i = 0; i< lazyImgs.length; i++) {
if (isInViewport(lazyImgs[i]) && !lazyImgs[i].classList.contains("loaded")) {
lazyImgs[i].src = lazyImgs[i].dataset.imgSrc;
lazyImgs[i].classList.add("loaded");
}
}
});
// 判斷圖片是否在視口內
function isInViewport(elem) {
var rect = elem.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top<= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left<= (window.innerWidth || document.documentElement.clientWidth)
);
}

這個版本的代碼不僅在用戶滾動時進行圖片加載，而且只對頁面上可見的圖片進行懶加載，并使用類名(.loaded)來記錄哪些圖片已經加載過了。這種方法可以避免一下子請求大量圖片，從而達到優化網頁性能的目的。 在實際應用中，JS圖片懶加載技術往往需要根據不同的場景進行優化。比如在手機或者移動設備上，我們可能需要加載不同分辨率的圖片，而不是全部使用原始分辨率的圖片；同時，在處理長頁面時，我們還需要注意一些圖片的高度和寬度，從而盡可能地減少頁面的滾動高度，提高用戶體驗。 總之，JS圖片懶加載技術已經成為了現代網頁開發的一個重要趨勢和手段，值得我們深入學習和探索。通過優化懶加載算法和更加精細的設計，我們可以為網頁帶來更好的性能和用戶體驗，同時也為移動設備和高清圖片的普及做出貢獻。