Question

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

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

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

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

Answer 1

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

Answer 2

在chrome中，使用jQuery的.ready（）似乎对我有用。这是我的小提琴：

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

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

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

EDIT2：经过多次调整后，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指向一个有效的图像，我认为任何进一步的错误检查都不是真正需要的问题。

Answer 3

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

Answer 4

您可以尝试一下，这很基本。

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

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

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

4 个答案: