请教 js 怎么判断 css background url() 的图片加载完成

Question

最近遇到一个图片加载优化的问题，我想设置一个背景，但是加载图片是有一定的时间的，于是我就想在图片加载完成之前给个等待的图标，类似 loading，但是不知道怎么判断 css background url() ，如果是图片 img 可以直接用 onload 的方法，请问应该怎么做比较好？

还是应该怎么缓存一张大概 2M 的图片比较好？谢谢大家的指教。

Answer 1

首先没有javascript的event能判断background image的加载状态。这个问题目前最好的解决方法还就是new一个Image，给这个image设置src为background image的路径，然后监听该image的load事件。

具体实现参考 codepen

如果你想用现成的，有人封装了一个jquery插件：waitForImages，用的也是上面这种方法。

测试过，就算浏览器关闭了缓存，这个方案也是可行的。

Answer 2

var loading = true;
var img = document.createElement('img');
img.src = 'url';
img.onload = function(){ loading = false; }

Answer 3

其实我个人已经知道 chrome 的缓存其实做得挺好的了，当然打开开发者模式其实都是 disable cache 的，所以这里想提醒一点调试者要注意这点。

Answer 4

非得用background么？其实你可以吧loading图作为background，那张2m的图片用img就可以了

<img class="bg-img test-img" src="你的2M图片路径"/>

.bg-img {
  background url(loading图片路径)
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.test-img {
  width 200px
  height 200px
}