CSS 圖片懶加載是一種在網(wǎng)頁中延遲加載圖片的技術(shù)。這種技術(shù)可以在網(wǎng)頁打開時(shí)不必一次性加載所有圖片，而是當(dāng)用戶滑動到圖片位置時(shí)再動態(tài)加載圖片。這樣可以減少網(wǎng)頁加載時(shí)間和帶寬使用。

img:not([src]) {
visibility: hidden;
}
img[data-src] {
visibility: hidden;
transition: visibility 0s linear 0.5s;
}
img[data-src].lazyload {
visibility: visible;
transition: visibility 0s linear 0s;
}

上面的代碼中，第一個(gè)選擇器選擇沒有指定src屬性的img元素，將它們的visibility設(shè)置為hidden。第二個(gè)選擇器選擇具有data-src屬性的img元素，并將它們的visibility設(shè)置為hidden。這是因?yàn)檫@些圖片不需要在剛開始時(shí)加載。

當(dāng)圖片元素滑動到視圖中時(shí)，我們給它添加一個(gè).lazyload類。這樣，第三個(gè)選擇器就會選擇到這些圖片元素，并將它們的visibility設(shè)置為visible。這樣，圖片就會開始加載了。

因此，要使圖片懶加載生效，我們只需在HTML中省略img元素的src屬性，而是使用data-src屬性來指定圖片的真實(shí)地址，并在JavaScript中添加代碼來檢測圖片元素是否進(jìn)入了視圖。

總之，使用CSS實(shí)現(xiàn)圖片懶加載是一種十分高效的技術(shù)。除了減少頁面加載時(shí)間外，它還可以減少帶寬使用和提高用戶體驗(yàn)。