如何加载CSS背景图像？ 事件被解雇了吗？
我有一个带有图像背景的侧边栏小部件。
这是一个搜索输入表单。 我不希望输入在图像加载之前显示。
有没有办法将load事件处理程序附加到CSS背景图像，如普通的img元素/对象？
我知道这可以在普通图像上完成，但我想将它保留为CSS背景，因为图像是精灵的一部分。 我使用的是jQuery，因此使用jQuery或plain DOM JS的解决方案同样出色。
您可以使用DOM /隐藏图像加载相同的图像并绑定到其上的load事件。 浏览器的缓存应该注意不要加载图像两次，如果图像已经加载，事件应该立即触发……没有测试，很难。
在chrome中，使用jQuery的.ready（）似乎对我有用。 这是我的小提琴：
图像只是我选择的一个相当大的随机图像 – 在我的一些测试中加载实际上需要很长时间，所以可能值得用更小的东西替换。 但最终的结果是你想要我想的：加载需要一段时间，一旦加载警报，然后显示文本框（#txt）。 似乎也适用于Firefox; 不确定其他浏览器。
编辑：哈，它似乎适用于Chrome，Firefox和Safari。 在IE8中不起作用。 所以…它适用于所有真正的浏览器:)
编辑2：经过多次摆弄，Allesandro和我自己的解决方案的组合似乎有效。 我在隐藏的img上使用.ready（）来检测图像实际加载的时间，然后将其加载到CSS背景中。
HTML：
使用Javascript：
$(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); }); });
CSS：
#testdiv { background:#aaaaaa none no-repeat right top; width: 400px; height: 400px; } #txt{ margin-left: 180px; margin-top: 140px; }
注意：下面有一条关于此操作的评论不起作用，因为您可以更改图像的url，但仍然会触发加载的事件。 这实际上与我期望的当前代码完全一样 – 它不会检查你指向你的“图像”的url是否有效并且真的是一个图像，它所做的只是触发一个事件当img准备就绪并改变背景时。 代码中的假设是你的url指向一个有效的图像，我认为任何进一步的错误检查都不是真正需要的问题。
不要在css中设置背景，而是将图像加载到用javascript（或更好的，jquery）创建的img标签中。 一旦加载，它将触发加载事件。 触发此事件时，将style属性应用于div