背景图片闪现空白问题

那天天气不错，心情并不好，因为感冒了。
实现前端一个弹出框功能时，发现有背景图片的弹出框，会出现闪白现象。因为心情不太好，我一直忍着。
直到今天， 研究一下解决方案，于是有了今天的文章。

这是一个很基础的问题，也很常见的问题。 正常情况下我们都会忽视他。

总结

我===内容 & 你 === 背景图片

我显示的时候，你已经在

若不能，我显示的时候，你尽快在

你尽可能的小

方案

可以到背景图片闪现空白解决方案 看到各种方案演示。

方案1 base64

如果背景图片相对小，或者你执意要这嘛做，图片转为bas464，存到css或者html里面。
演示： 背景图片闪现空白方案-base背景图片

不足： base64占带宽啊！

方案2 prefetch <link ></link> <link href="http://www.likecs.com/img/bg-huoluo.jpg"/> .bg { background-image:url("http://www.likecs.com/img/bg-huoluo.jpg"); background-size: contain; }

prefetch是对浏览器的暗示，暗示将来可能需要某些资源，但由浏览器决定是否加载以及什么时候加载这些资源。 优先级低。
pre家族：preload, prefetch, dns-prefetch, preconnect, prerender。
有人可能会问，干嘛不用preload。 呵呵， 你说呢？
演示： 背景图片闪现空白方案-preferch

方案3： 创建隐藏Img节点 <img src="http://www.likecs.com/img/bg-huoluo.jpg" alt="" title=""/> .bg { background-color: #2D2C27; background-image: url(./img/bg-huoluo.jpg); background-size: contain; }

这方案好理解，图片已经请求下载啦。 其实不能解决首屏背景图片的问题。
演示：背景图片闪现空白方案-创建隐藏Img节点

方案4 等待图片加载完毕再显示弹框 let dg = null; function createDialog() { onImageLoad('http://www.likecs.com/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>我爱赫萝!!!!</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

最后

jpg有渐进式， png有交错模式。
我们一起来看看效果。
演示： png正常，png交错，jpg渐进