頁面加載閃白
今天遇到一個問題，寫了一個使用深色背景圖的網頁，發現訪問/刷新時，會出現短暫的閃白現象。
之前使用淺色背景時沒有發現過這個問題，搜索半天也沒有找到特別直白有效的回答。
找到的幾個答案，有說預加載的，有說降低背景圖片的分辨率的，使用js加載背景的。試過之後感覺效果都不理想。
後來又重新觀察了一下閃白的情況，發現每次都是頁面的後半段閃爍，才發現問題的關鍵不在代碼，而在圖片
圖片加載的兩種方式：
-
Baseline JPEG（基準式）
-
Progressive JPEG（漸進式）
基準型加載
這種類型的文件存儲方式是按從上到下的掃描方式，打開這個文件顯示它的內容時，數據將按照存儲時的順序從上到下一行一行的被顯示出來，直到所有的數據都被讀完，就完成了整張圖片的顯示。
放到瀏覽器裏就是這樣我遇到的這種情況了，雖然圖片很快就加載完成了，但是有一點小小的延遲，就會導致閃白。
漸進式加載
這種文件包含多次掃描，會先顯示整個圖片的模糊輪廓，隨着掃描次數的增加，圖片變得越來越清晰。
打開圖片的效果是，先會加載一張比較模糊的圖片大圖，隨着不斷的加載，圖片會越來越清晰。
優化方案
將背景圖片的加載格式轉換成漸進式加載即可。
PS轉換
將圖片放入ps中重新到出，到處是選擇漸進式加載格式即可。
代碼轉換
就該個格式用ps還是有點麻煩，用代碼直接修改還是更適合我們。
下面給出我用Python的轉換代碼。
from PIL import Image,ImageFile
img=Image.open('./bg.png')
destination = "./bg.jpeg"
try:
img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except :
ImageFile.MAXBLOCK = img.size[0] * img.size[1]
img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)