要如何检测css文件中的引用的图片已下载完成?

Question

js中,创建一个Image对象
然后可以检测是否已完成请求
如

var image = new Image();
image.url = XXX.png;
image.onload(function() {
    //这里做些事
});

那css文件中的引用的图片可以检测到是否已完成请求图片的步骤呢?
例如

.page1 {
    background: url(XXX.png);
}

我要怎么样才能知道这个XXX.png是否已经完成加载了呢?
简单来说,我想在图片加载完成之前先给一个用loading页
在全部的图片(包括页面中<img>标签和css中的引用图片)加载完成后再展示页面
应该怎样做?

Answer 1

现成的解决方案在这里：https://github.com/alexanderdickson/waitForImages

简单的说，当样式应用于 DOM 对象的时候，我们可以通过 DOM.style 获取到它的值（比如 backgroundImage），然后取出其中 url() 里面的路径。一旦你得到这个路径就可以用你问题里描述的方法来检测了。

这个插件的基本原理就是这样，只不过要解决递归向下查找的问题，然后等待所有加载完成之后再构造一个自定义事件供你捕获。另外它除了传统的 callback 形式调用以外，还为你提供了 jQuery 兼容的 promise，比较好用。