在Web開發中，優化網站速度是非常重要的一個方面。其中一種優化方式是延遲加載圖片，即在頁面加載時不立即加載所有圖片資源，而是等到用戶滾動到該圖片位置時再加載。這種方式可以提升頁面的加載速度，特別是對于包含大量圖片的頁面來說，效果更為顯著。
要實現延遲加載圖片的效果，我們可以使用CSS技術。具體來說，我們可以通過background-image屬性將圖片作為CSS背景，并在需要加載的圖片元素上設置一個自定義屬性data-src指向圖片路徑。在頁面初始化時，我們只需要將所有具有該自定義屬性的元素的CSS背景設置為一個占位符圖片，然后通過JavaScript監聽用戶的滾動事件，當用戶滾動到相應位置時再將占位符圖片替換為真實的圖片路徑。
以下是一個具體的實現示例：

/* 具有data-src屬性的元素的占位符樣式 */
.lazy-load {
background-image: url('placeholder.png');
}
/* 監聽用戶滾動事件 */
document.addEventListener('scroll', function() {
var lazyImages = document.querySelectorAll('.lazy-load');
for (var i = 0; i < lazyImages.length; i++) {
var image = lazyImages[i];
/* 判斷是否滾動到元素位置 */
if (image.getBoundingClientRect().y < window.innerHeight) {
/* 將背景圖片更改為真實圖片路徑 */
image.style.backgroundImage = 'url(' + image.dataset.src + ')'; 
/* 移除class, 防止重復加載 */
image.classList.remove('lazy-load'); 
}
}
});

以上代碼中，我們首先創建了一個CSS類.lazy-load，可以用于所有需要延遲加載的元素，并將其背景設置為一個占位符圖片。在JavaScript代碼方面，我們監聽了scroll事件，并通過函數獲取所有具有.lazy-load和data-src屬性的元素。然后，當用戶滾動到相應位置時，我們檢查元素是否出現在屏幕內，如果是，則將元素的背景圖片更改為真實圖片路徑，并將其從.lazy-load類中移除，以防止重復加載。
總結起來，通過CSS技術實現延遲加載圖片可以提高頁面的加載速度，尤其對于包含大量圖片的頁面非常重要。這項技術還可以通過JavaScript實現，具體實現方法是將圖片路徑保存在自定義屬性中，等到用戶滾動到相應位置時再將其替換為真實路徑。