html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化

页面加载闪白

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

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

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

原文：https://www.cnblogs.com/aduner/p/14370246.html

html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化相关推荐

recycler 刷新图片闪烁_android 解决RecyclerView notifyDataSetChanged刷新闪屏问题（图片刷新）...
最近遇到了RecyclerView 在执行notifyDataSetChanged操作时会出现闪屏,图片刷新,然后根据网上资料提示使用修改动画,设置动画时间 recyclerView.getIte ...
vue+webpack项目打包后背景图片加载不出来问题解决
vue+webpack项目打包后背景图片加载不出来问题解决参考文章: (1)vue+webpack项目打包后背景图片加载不出来问题解决 (2)https://www.cnblogs.com/mica ...
Hexo博客Next6.0版本主题配置（背景图片加载、侧边栏社交小图标设置、设置网站图标）
随机背景图片加载原理自动更换背景是修改添加背景的css样式实现图片来源 https://source.unsplash.com/ 修改背景样式修改themes\next\source\css\ ...
php背景图片透明度,css如何使用opacity属性给背景图片加透明度（代码）
本篇文章给大家带来的内容是关于css如何使用opacity属性给背景图片加透明度(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS 中无法直接给背景图片加 opacity ...
html给背景图片加遮罩,科技常识：css3给背景图片加颜色遮罩的方法
今天小编跟大家讲解下有关css3给背景图片加颜色遮罩的方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css3给背景图片加颜色遮罩的方法的相关资料,希望小伙伴们看了有所帮助. 前段时 ...
背景图片hover加蒙层_css3给背景图片加颜色遮罩的方法
前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法. 方法一:通过定位叠加(注意层级) .wrap1 { position: relative; width ...
必应每日壁纸API HTML 使用必应每日API为背景 css 背景图片加模糊遮罩
必应每日壁纸API 必应每日壁纸接口API https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh ...
网页背景图片加遮罩层详解
首先加入背景图片别的不说先上代码 <head>  <style>body {background-image: url(" ...
vue页面加载时闪现_如何解决Vue.js显示数据的时,页面闪现
下面我就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助. 今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数 ...

html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化

html加载时页面闪烁白色背景,解决页面加载闪白问题-背景图片加载优化相关推荐

最新文章

热门文章