解决页面加载闪白问题-背景图片加载优化

页面加载闪白

今天遇到一个问题，写了一个使用深色背景图的网页，发现访问/刷新时，会出现短暂的闪白现象。

之前使用浅色背景时没有发现过这个问题，搜索半天也没有找到特别直白有效的回答。

找到的几个答案，有说预加载的，有说降低背景图片的分辨率的，使用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)