隨著網頁的發展，Web開發者對于圖片的需求越來越高。然而，圖片也成為了制約網站速度和性能的重要因素之一。當用戶打開一個網頁時，需要等待所有的圖片都加載完畢才能正常瀏覽，這將導致用戶的等待時間過長，也會影響網站的搜索引擎排名和用戶體驗。為了解決這個問題，Javascript的延遲加載技術應運而生。

延遲加載是指在頁面剛開始加載時，只加載可視區域內的圖片，而不是全部加載。當用戶向下滾動頁面時，再動態地加載其他圖片。這種方法能夠極大地減小頁面的加載時間，提高用戶的訪問速度。

function lazyLoad() {
var images = document.querySelectorAll('.lazyload');
var len = images.length;
for(var i = 0; i< len; i++) {
var image = images[i];
if(isVisible(image)) {
image.src = image.dataset.src;
image.classList.remove('lazyload');
}
}
}
function isVisible(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom<= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right<= (window.innerWidth || document.documentElement.clientWidth)
);
}
window.addEventListener('scroll', lazyLoad);

以上代碼實現了一個基本的圖片延遲加載功能。首先，通過querySelectorAll方法獲取所有class為"lazyload"的圖片。然后通過isVisible函數來判斷圖片是否在可視區域內，如果是則動態加載圖片。最后監聽頁面的滾動事件，當用戶滾動頁面時，再次調用lazyLoad函數進行圖片的動態加載。

更進一步的，我們可以通過使用IntersectionObserver API來實現更高效的延遲加載。IntersectionObserver是一個異步API，可以通過監測被觀察對象和它們父元素的交叉來判斷是否在可視區域內。這種方法不僅能夠減少代碼量，也能夠減小性能消耗。

var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if(entry.isIntersecting) {
var lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
observer.unobserve(lazyImage);
}
});
});
var lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(function(lazyImage) {
observer.observe(lazyImage);
});

以上代碼使用IntersectionObserver API實現了圖片的延遲加載。首先，創建一個IntersectionObserver對象，然后指定回調函數和觀察選項。當被觀察對象進入可視區域時，即entry.isIntersecting為true時，再執行圖片的動態加載。最后，取消觀察該圖片元素，以提高性能。

總之，Javascript的延遲加載技術能夠提升頁面性能和用戶體驗。你可以根據需要選擇不同的實現方式，使自己的網站更高效，更快速。