博客
关于我
解决页面加载闪白问题-背景图片加载优化
阅读量: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/

你可能感兴趣的文章
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>
mysqldump备份时忽略某些表
查看>>
mysqldump实现数据备份及灾难恢复
查看>>
mysqldump数据库备份无法进行操作只能查询 --single-transaction
查看>>
mysqldump的一些用法
查看>>
mysqli
查看>>
MySQLIntegrityConstraintViolationException异常处理
查看>>
mysqlreport分析工具详解
查看>>