CSS背景圖片懶加載指的是只有當(dāng)圖片需要顯示時(shí)才加載圖片，而不是在一開始就把所有圖片都加載出來，這樣可以提高頁面加載速度。以下是實(shí)現(xiàn)CSS背景圖片懶加載的代碼：

/* 首先，在CSS文件中給需要顯示背景圖片的元素設(shè)置一個(gè)占位符 */
.placeholder {
width: 100%;
height: 100%;
}
/* 然后，在CSS文件中給需要顯示背景圖片的元素設(shè)置背景圖 */
img {
background-image: url("placeholder.png");
/* 設(shè)置背景圖的位置和大小與占位符相同 */
background-position: center top;
background-size: cover;
}
/* 最后，在JavaScript中實(shí)現(xiàn)懶加載 */
window.addEventListener('scroll', function() {
/* 獲取需要顯示背景圖片的元素 */
const img = document.querySelector('img');
/* 判斷元素是否出現(xiàn)在視口中 */
const rect = img.getBoundingClientRect();
if (rect.top< window.innerHeight) {
/* 如果出現(xiàn)在視口中，則將占位符替換為真正的背景圖 */
img.style.backgroundImage = 'url("real-image.png")';
}
});

以上代碼中的占位符可以是一個(gè)小圖片，也可以是一個(gè)CSS生成的純色塊，關(guān)鍵是在圖片加載前先顯示一個(gè)占位符，避免頁面空白。