Javascript 如何判断CSS背景图像何时加载？是否已触发事件？

我有一个有图像背景的边栏小部件

这是一个搜索输入表单。我不希望在加载图像之前显示输入

有没有一种方法可以像普通的img元素/对象一样，将

加载

事件处理程序附加到CSS背景图像

---

我知道这可以在普通图像上完成，但我希望将其作为CSS背景，因为该图像是sprite的一部分。我使用的是jQuery，因此使用jQuery或普通DOM JS的解决方案同样不错。

您可以使用DOM/a隐藏图像加载相同的图像，并绑定到该图像上的

load

事件。浏览器的缓存应该注意不要两次加载图像，如果图像已经加载，事件应该立即触发。。。未测试，很难。

不要在css中设置背景，而是将图像加载到使用javascript（或更好的jquery）创建的img标记中。加载后，它将触发加载事件。当触发此事件时，使用jQuery的.ready（）将style属性应用于chrome中的div

，对我来说似乎是可行的。这是我的小提琴：

这张图片只是我随机选择的一张，相当大——在我的一些测试中加载它实际上需要很长时间，因此可能值得用更小的图片替换。但最终的结果是我认为你想要的：加载需要一段时间，一旦加载了警报，就会显示文本框（#txt）。似乎在Firefox中也能工作；不确定其他浏览器

编辑：哈，它似乎在Chrome、Firefox和Safari中工作。在IE8中不起作用。所以它适用于所有真正的浏览器：）

编辑2：经过多次修改，Allesandro和我自己的解决方案的组合似乎奏效了。我在隐藏的img上使用.ready（）来检测图像实际加载的时间，然后将其加载到CSS背景中

HTML:

CSS:

---

注意：下面有一条关于此操作不起作用的评论，因为您可以更改图像的url，但它仍会触发加载的事件。事实上，在给定当前代码的情况下，它的工作原理与我所期望的几乎完全相同——它不会检查您为“图像”指向的url是否有效，并且实际上是一个图像，它所做的只是在img准备好并更改背景时触发一个事件。代码中的假设是您的url指向一个有效的图像，并且我认为考虑到这个问题，不需要进一步的错误检查

你可以试试这个，它很基本

function onImageLoaded(url, callback) {
    const img = new Image();
    img.src = url;
    img.onloadend = callback;   //Image has loaded or failed
    return;
}

---

它适用于背景图像和img标记。

我一直在尝试这种方法来解决IE8s缺少“DOMContentLoaded”事件的问题，这似乎就是.ready（）无法在css中设置背景的原因？听我使用css背景图像，所以我可以使用“封面”选项。这是不可能的图像标签，除非你使用一个库，我不认为有任何作为写这个。当风格应用，它将采取从缓存图像。好主意。下面是如何做到的：在未来，一种更高级、更可预测、可能更有效的检测CSS中引用的资产（图像、字体…）是否已加载的方法将是使用和：服务人员将加载资产，将其传递到页面，并发布消息指示资产已加载，可以从JS内部进行操作，而无需依赖浏览器自身的缓存来避免额外的请求。

$(function() {
    $('#dummy').ready(function() { 
        alert('loaded');
        $('#testdiv').css('background-image', 'url(http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg)');
        $('#txt').show(1000);
    });
 });

#testdiv {
    background:#aaaaaa none no-repeat right top;
    width: 400px;
    height: 400px;
}

#txt{
    margin-left: 180px;
    margin-top: 140px;
}

function onImageLoaded(url, callback) {
    const img = new Image();
    img.src = url;
    img.onloadend = callback;   //Image has loaded or failed
    return;
}