在網(wǎng)絡(luò)世界里，各種元素交錯(cuò)在一起，構(gòu)成了精彩紛呈的網(wǎng)頁(yè)。其中，圖片是讓網(wǎng)頁(yè)更加生動(dòng)、圖像更加豐富的一大元素。但是，當(dāng)圖片未能及時(shí)加載完成時(shí)，網(wǎng)頁(yè)將顯得十分空洞、毫無(wú)生氣。針對(duì)這一問(wèn)題，CSS提供了一種優(yōu)雅的解決方式，即“圖片未加載完成時(shí)”的背景。

img{
display: none; /*將原有圖片隱藏起來(lái)*/
}
.placeholder{
width: 300px; /*設(shè)置占位框的寬和高*/
height: 200px;
background-color: #f3f3f3; /*設(shè)置占位框的背景色*/
}
.placeholder::before{
content: " "; /*使用偽元素來(lái)添加圖片占位符*/
display: block;
width: 50px;
height: 50px;
background-image: url('loading.gif'); /*設(shè)置圖片占位符的背景圖*/
background-size: cover;
background-position: center;
margin: 75px auto; /*調(diào)整位置*/
}
img.loaded{
display: block; /*當(dāng)圖片加載完成后，顯示圖片*/
}
img.loaded + .placeholder{
display: none; /*同時(shí)，隱藏占位框*/
}

以上代碼中，我們將原有的圖片隱藏起來(lái)，并使用一個(gè)占位符（placeholder）來(lái)替代原來(lái)的圖片。占位符的寬、高和背景色可以根據(jù)實(shí)際需要進(jìn)行調(diào)整。另外，為了讓占位符更加生動(dòng)，我們使用了一個(gè)旋轉(zhuǎn)的loading小圖標(biāo)，將其作為占位符的背景圖。

當(dāng)圖片加載完成后，我們通過(guò)在img元素上添加“l(fā)oaded”類(lèi)，來(lái)顯示原來(lái)圖片的真實(shí)內(nèi)容，并隱藏占位符。通過(guò)這種方式，即使圖片的加載速度較慢，也能使網(wǎng)頁(yè)看起來(lái)更加完整、生動(dòng)。