在網(wǎng)頁(yè)設(shè)計(jì)中，我們常常會(huì)遇到一種令人頭疼的問題：圖片閃白。尤其是在加載大量圖片的情況下，閃白現(xiàn)象更是大量出現(xiàn)，極大的影響了網(wǎng)站的美觀和用戶體驗(yàn)。其實(shí)，“圖片閃白”是由 CSS 樣式表的加載順序所決定的。

在圖像加速過程中，當(dāng)網(wǎng)頁(yè) HTML 代碼中的圖片鏈接被瀏覽器掃描到，瀏覽器先向服務(wù)器發(fā)起請(qǐng)求，然后再下載圖片到瀏覽器端進(jìn)行渲染。在這個(gè)過程中，CSS 文件和 JavaScript 文件也同樣需要被加載。

如果圖片加載完成了，但是 CSS 文件還沒加載完成，這時(shí)候圖片就會(huì)出現(xiàn)閃白的現(xiàn)象，因?yàn)闆]有正確的 CSS 樣式定義，圖片的寬高不能正確的呈現(xiàn)。

img{
display:block;
width: 100%;
}

解決辦法也很簡(jiǎn)單，只需要在 CSS 中對(duì)圖片進(jìn)行定義：設(shè)定圖片的寬度、高度即可，這樣，即使 CSS 文件還沒有加載完成，圖片也可以正常渲染出來了，不會(huì)出現(xiàn)閃白。

總結(jié)來說，圖片閃白是由 CSS 樣式表加載順序所決定的。只要在 CSS 中定義好圖片的寬高，便能夠解決圖片閃白的問題。