CSS3圖片延遲加載是指在頁面加載完畢后，再去加載圖片，從而加速頁面加載速度，提高用戶體驗(yàn)。這種技術(shù)主要依賴于CSS3中的lazyload屬性。

我們可以通過以下代碼來實(shí)現(xiàn)CSS3圖片延遲加載：

.lazyload {
background-image: url("loading.gif"); /* 加載中的圖片 */
}
.lazyload.loaded {
background-image: none !important; /* 圖片加載完畢后，將loading圖移除 */
}

在HTML中，我們可以用以下代碼將lazyload屬性綁定到具體的圖片上：

<img src="example.jpg" class="lazyload" data-src="example.jpg" />

在這段代碼中，src屬性表示頁面剛剛加載時(shí)的圖片地址，而data-src屬性則是真正要加載的圖片地址。

最后，我們需要在JavaScript中寫入以下代碼：

window.onload = function() {
var imgs = document.querySelectorAll('.lazyload');
for (var i = 0; i< imgs.length; i++) {
if (isInViewport(imgs[i])) {
imgs[i].setAttribute('src', imgs[i].getAttribute('data-src'));
imgs[i].classList.add('loaded');
}
}
}

這段代碼會(huì)遍歷頁面中所有帶有lazyload屬性的圖片，如果當(dāng)前圖片在可見區(qū)域內(nèi)，則將其src屬性替換為data-src屬性，并將其 CSS 類中加入loaded屬性，用于在圖片加載完畢后去掉 loading 圖。

順便提一下，isInViewport是一個(gè)判斷元素是否在可見區(qū)域內(nèi)的函數(shù)，實(shí)現(xiàn)如下：

function isInViewport(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);
}

到此為止，我們就成功地實(shí)現(xiàn)了CSS3圖片延遲加載。通過這種技術(shù)，我們可以為用戶提供更快速、更流暢的瀏覽體驗(yàn)。