如何判断CSS背景图像何时加载?是已启动的事件

How can I tell when a CSS background image has loaded? Is an event fired?

本文关键字：加载 启动 事件 何时 图像 何判断 判断 背景 CSS      更新时间：2023-09-26

我有一个侧边栏小部件，它有一个图像背景。

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

有没有一种方法可以像普通的img元素/对象一样，将load事件处理程序附加到CSS背景图像上？

我知道这可以在普通图像上完成，但我想把它作为CSS背景，因为图像是精灵的一部分。我使用的是jQuery，所以使用jQuery或普通DOM JS的解决方案同样好。

您可以使用DOM/a隐藏图像加载同一图像，并绑定到该图像上的load事件。浏览器的缓存应该注意不要两次加载图像，如果图像已经加载，则事件应该立即启动。。。没有经过测试，很难。

在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，它仍然会触发加载的事件。事实上，在给定当前代码的情况下，这与我预期的工作原理非常吻合——它不会检查你为"图像"指向的url是否有效，是否真的是图像，它所做的只是在img准备好时触发一个事件并更改背景。代码中的假设是，你的url指向一个有效的图像，我认为考虑到这个问题，实际上不需要任何进一步的错误检查。

你可以试试这个，它非常基本。

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

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

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

相关文章：