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

Question

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

Answer 1

首先没有javascript的event能判断backgroundimage的加载状态。这个问题目前最好的解决方法还就是new一个Image，给这个image设置src为backgroundimage的路径，然后监听该image的load事件。具体实现参考codepen如果你想用现成的，有人封装了一个jquery插件：waitForImages，用的也是上面这种方法。测试过，就算浏览器关闭了缓存，这个方案也是可行的。

Answer 2

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