内容简介：那天天气不错，心情并不好，因为感冒了。实现前端一个弹出框功能时，发现有背景图片的弹出框，会出现闪白现象。因为心情不太好，我一直忍着。直到今天， 研究一下解决方案，于是有了今天的文章。
那天天气不错，心情并不好，因为感冒了。
实现前端一个弹出框功能时，发现有背景图片的弹出框，会出现闪白现象。因为心情不太好，我一直忍着。
直到今天， 研究一下解决方案，于是有了今天的文章。
这是一个很基础的问题，也很常见的问题。 正常情况下我们都会忽视他。
总结
我===内容 & 你 === 背景图片
-
我显示的时候，你已经在
-
若不能，我显示的时候，你尽快在
-
你尽可能的小
方案
可以到 背景图片闪现空白解决方案 看到各种方案演示。
方案1 base64
如果背景图片相对小，或者你执意要这嘛做，图片转为bas464，存到css或者html里面。
不足： base64占带宽啊！
方案2 prefetch
<link rel="prefetch" ></link>
<link rel="prefetch" href="./img/bg-huoluo.jpg"/>
.bg {
background-image:url("./img/bg-huoluo.jpg");
background-size: contain;
}
prefetch是对浏览器的暗示，暗示将来可能需要某些资源，但由浏览器决定是否加载以及什么时候加载这些资源。 优先级低。
pre家族：preload, prefetch, dns-prefetch, preconnect, prerender。
有人可能会问，干嘛不用preload。 呵呵， 你说呢？
方案3： 创建隐藏Img节点
<img src="./img/bg-huoluo.jpg" alt="" title="" style="display: none"/>
.bg {
background-color: #2D2C27;
background-image: url(./img/bg-huoluo.jpg);
background-size: contain;
}
这方案好理解，图片已经请求下载啦。 其实不能解决首屏背景图片的问题。
方案4 等待图片加载完毕再显示弹框
let dg = null;
function createDialog() {
onImageLoad('./img/bg-huoluo.jpg').then(src => {
if (!dg) {
dg = document.createElement('div');
dg.className = "bg";
dg.style.backgroundImage = `url(${src})`;
dg.id = "dialog";
dg.innerHTML = `
<div class="content">我爱赫萝!!!!</div>
`
document.body.appendChild(dg);
}
})
}
function onImageLoad(src) {
return new Promise((resolve, reject) => {
let img = new Image();
img.src = src;
img.onload = function () {
resolve(src)
}
img.onerror = reject
})
}
当然这是有明显问题的，你不能因为一个背景图片而让内容无法正常展现。
当然你可以有修正方案。
方案5 同时设置背景颜色和图片
.bg {
background-color:#433F34;
background-size: contain;
}
.bg-new{
background-image: url(./img/bg-huoluo.jpg)
}
这样，背景图片加载上的时候，不会有明显的闪白效果。 当然要是背景图片，五颜六色，估计有点为难客官啦。
其他呢
再回头看看总结:
我===内容 & 你 === 背景图片
-
我显示的时候，你已经在
-
若不能，我显示的时候，你尽快在
-
你尽可能的小
那么：有下面的一些额外的话：
- webp格式，减少图片大小
- css spirte, 减少http开销
- jpg格式图片压缩
- 图片cdn
- 多域名
- 背景图片切割，能repeat就repeat
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
