如何加载CSS背景图像？事件被解雇了吗？

Question

我有一个侧边栏小部件,具有图像背景.

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

有没有办法将load事件处理程序附加到CSS背景图像,如普通的img元素/对象？

我知道这可以在普通图像上完成,但我想将它保留为CSS背景,因为图像是精灵的一部分.我使用的是jQuery,因此使用jQuery或plain DOM JS的解决方案同样出色.

Answer 1

您可以使用DOM /隐藏图像加载相同的图像并绑定到该load事件.浏览器的缓存应该注意不加载图像两次,如果图像已经加载,事件应该立即触发......没有测试,很难.

Answer 2

在chrome中,使用jQuery的.ready()似乎对我有用.这是我的小提琴:

http://jsfiddle.net/pWjBM/5/

图像只是我选择的一个相当大的随机图像 - 在我的一些测试中加载实际上需要很长时间,因此可能值得用更小的东西替换.但最终的结果是你想要我想的:加载需要一段时间,一旦加载警报然后显示文本框(#txt).似乎也适用于Firefox; 不确定其他浏览器.

编辑:哈,它似乎适用于Chrome,Firefox和Safari.在IE8中不起作用.所以...它适用于所有真正的浏览器:)

编辑2:经过多次摆弄,Allesandro和我自己的解决方案的组合似乎有效.我在隐藏的img上使用.ready()来检测图像实际加载的时间,然后将其加载到CSS背景中.

http://jsfiddle.net/pWjBM/41/

HTML:

<div id="testdiv">
    <input type="text" id="txt" style="display:none;" />
</div>
<img src="http://www.nasa.gov/sites/default/files/images/712130main_8246931247_e60f3c09fb_o.jpg" id="dummy" style="display:none;" alt="" />

使用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是否有效并且真的是一个图像,它所做的只是触发一个事件当img准备就绪并改变背景时.代码中的假设是你的url指向一个有效的图像,我认为任何进一步的错误检查都不是真正需要的问题.