CSS在網頁設計中應用廣泛，其中有一個常見問題就是圖片加載的時候，我們總是需要等待一段時間才能看到圖片顯示出來。當然，這對于大型圖片的加載我么理解，但是對于一些小圖片的加載，等待時間長也是比較煩人的。所以今天我們就來了解一些 CSS 圖片加載后顯示的方法，幫助你優化網頁加載體驗。

img {
display: none; // 先將圖片隱藏
}
img.loaded {
display: block; // 圖片加載完成后將它顯示出來
}

首先，我們可以通過 CSS 將圖片的顯示狀態設置為“不可見”，如上代碼中的display: none;。這樣，當圖片加載完成后，我們再通過display: block;將其顯示出來。這種方法可以確保用戶在等待圖片加載的過程中，不會看到空白圖案。

img {
opacity: 0; // 設置圖片的透明度
transition: opacity .5s; // 設置過渡動畫效果
}
img.loaded {
opacity: 1; // 圖片加載完成后將其設置回原始透明度，從而顯示出來
}

另外，我們還可以通過 CSS 的漸變透明度過渡方法來實現圖片的加載動畫。代碼如上所示，當圖片加載完成后，我們再將其透明度設置回原始狀態，從而出現漸變效果。這種方法看起來更具有藝術感，并能帶來更好的視覺效果。

總而言之，通過上述的 CSS 圖片加載方法，我們可以提高頁面的加載速度，并提高網站的用戶體驗。當然，不同的網站有不同的需求，我們可以根據頁面的特點來靈活運用這些技巧，實現更出色的效果。