页面加载闪白
今天遇到一个问题，写了一个使用深色背景图的网页，发现访问/刷新时，会出现短暂的闪白现象。
之前使用浅色背景时没有发现过这个问题，搜索半天也没有找到特别直白有效的回答。
找到的几个答案，有说预加载的，有说降低背景图片的分辨率的，使用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)