html中背景图片优先加载

Question

如题，背景图片改如何优先加载。
现在看到每次加载图片都是在页面内容加载之后加载，中间还能看到白色的背景颜色。
如何修改才能看不到白色的这个中间过程？

Answer 1

图片比较大的时候，即使先发请求，也可能最后返回。
可以考虑先显示一个低质量的背景图，然后用js加载原图后进行替换。

Answer 2

background-image: url(data:image/png;base64,巴拉巴拉)

Answer 3

有几个思路吧

1. 可以先渲染一个很小的背景图片的缩略图，如果必要的话，用webpack把缩略图转成base64压缩在代码里。避免了背景一片空白。然后再去请求完整的背景图来渲染。知乎是这么做的
2. 渐进式jpg。去google百度一下。国外很多网站用这种图片，缺点是安卓不支持（我没记错的话）
3. 图片预加载。一般游戏会用。一般游戏都会有loading这个过程。loading就是在预加载图片资源。防止游戏里会出现图片资源逐步加载的过程。做法是在进入你要渲染背景图的页面之前，先用

var img = new Image();
img.onload = function() {
    // 跳转到有背景图片的路由
}
img.src = (你的背景图片url)

这种方法把图片资源请求到本地，缓存到浏览器。下一次访问这张图片时是从本地缓存拿的图片，就不会有网络缓慢加载的问题了。缺点是：并没有加快渲染速度，可能要改流程（多加一个loading页面）

暂时能想到这些

Answer 4

可以把其他的图片的src改个名字。
拿个Image对象加载图片。这样和背景是同时加载。
在img的onload里面再把其他图片的src换成真的地址。

<div style="background-image:url(/s/a.png)">
    <img src="/s/a.png" onload="loadOther()"/>
    <img data-src="/s/b.png"/>
    <img data-src="/s/c.png"/>
    <img data-src="/s/d.png"/>
    <img/>
</div>