博客
关于我
解决页面加载闪白问题-背景图片加载优化
阅读量:413 次
发布时间:2019-03-06

本文共 902 字,大约阅读时间需要 3 分钟。

页面加载闪白

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

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

找到的几个答案,有说预加载的,有说降低背景图片的分辨率的,使用js加载背景的。试过之后感觉效果都不理想。

后来又重新观察了一下闪白的情况,发现每次都是页面的后半段闪烁,才发现问题的关键不在代码,而在图片

图片加载的两种方式:

  • Baseline JPEG(基准式)

  • Progressive JPEG(渐进式)

基准型加载

这种类型的文件存储方式是按从上到下的扫描方式,打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示。

放到浏览器里就是这样我遇到的这种情况了,虽然图片很快就加载完成了,但是有一点小小的延迟,就会导致闪白

渐进式加载

这种文件包含多次扫描,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。

打开图片的效果是,先会加载一张比较模糊的图片大图,随着不断的加载,图片会越来越清晰。

优化方案

将背景图片的加载格式转换成渐进式加载即可。

PS转换

将图片放入ps中重新到出,到处是选择渐进式加载格式即可。

代码转换

就该个格式用ps还是有点麻烦,用代码直接修改还是更适合我们。

下面给出我用Python的转换代码。

from PIL import Image,ImageFileimg=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)

转载地址:http://qaikz.baihongyu.com/

你可能感兴趣的文章
MySQL中的DB、DBMS、SQL
查看>>
MySQL中的DECIMAL类型:MYSQL_TYPE_DECIMAL与MYSQL_TYPE_NEWDECIMAL详解
查看>>
MySQL中的GROUP_CONCAT()函数详解与实战应用
查看>>
MySQL中的IO问题分析与优化
查看>>
MySQL中的ON DUPLICATE KEY UPDATE详解与应用
查看>>
mysql中的rbs,SharePoint RBS:即使启用了RBS,内容数据库也在不断增长
查看>>
mysql中的undo log、redo log 、binlog大致概要
查看>>
Mysql中的using
查看>>
MySQL中的关键字深入比较:UNION vs UNION ALL
查看>>
mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏
查看>>
mysql中的字段如何选择合适的数据类型呢?
查看>>
MySQL中的字符集陷阱:为何避免使用UTF-8
查看>>
mysql中的数据导入与导出
查看>>
MySQL中的时间函数
查看>>
mysql中的约束
查看>>
MySQL中的表是什么?
查看>>
mysql中穿件函数时候delimiter的用法
查看>>
Mysql中索引的分类、增删改查与存储引擎对应关系
查看>>
Mysql中索引的最左前缀原则图文剖析(全)
查看>>
MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
查看>>