CSS背景图片何时加载完毕？是否触发了事件？

Question

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

在其上面有一个搜索输入表单。 我不希望在图像加载之前显示输入内容。

是否有一种方法像普通的img元素/对象那样附加CSS背景图像的load事件处理程序？

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

- Cole

Answer 1

您可以使用DOM / 隐藏图像来加载相同的图像，并绑定到load事件。浏览器的缓存应该会避免重复加载图片，如果图片已经加载，事件应该立即触发...未经测试，但这是一个解决方案。

- Félix Saparelli

---

这是如何做到的：https://dev59.com/Km445IYBdhLWcg3wDWKc#5058336 - Luca Steeb

未来检测CSS中引用的资产（图片、字体等）是否已加载的更高级、可预测且可能更有效的方法将是使用ServiceWorkers和postMessage：Service Worker将加载资产，将其传递给页面，并发布消息以指示资产已加载，以一种可以在JS内部执行而不依赖于浏览器自身缓存以避免额外请求的方式。 - Félix Saparelli

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，但它仍然会触发已加载事件。实际上，根据当前代码，它基本上正常工作-它不检查你指向“图像”的url是否有效并且确实是一张图片，它只在img准备好并更改背景时触发事件。代码中的假设是您的url指向一个有效的图像，并且我认为除了问题之外不需要任何进一步的错误检查。

- mutex

Answer 3

您可以尝试这个，它相当基础。

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

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

- Ric Flair

Answer 4

不要在CSS中设置背景，而是使用JavaScript（或更好的jQuery）创建img标签加载图像。一旦加载完成，它将触发载入事件。当此事件被触发时，将样式属性应用于您的div。

- Alessandro Pezzato

---

我一直在尝试这种方法来避免 IE8 缺乏 "DOMContentLoaded" 事件，这似乎是为什么 .ready() 在 <= IE8 中不起作用的原因... 然而它似乎也不起作用。请参见 http://api.jquery.com/load-event/ 中关于 .load() 的 jQuery 文档，其中提到了与图像一起使用时 load 事件的注意事项。 - mutex

不要在CSS中设置背景？听我说。我使用CSS背景图像，这样我就可以使用“cover”选项。除非您使用库，否则无法使用图像标记实现此目的，但我认为目前还没有这样的库。 - Mustafa

应用样式后，它将从缓存中获取图像。好主意。 - Senthil Kumaran C