Javascript 如何判断 CSS 背景图像何时加载？是否触发了事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6285809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I tell when a CSS background image has loaded? Is an event fired?
提问by Cole
I have a sidebar widget that has an image background.
我有一个带有图像背景的侧边栏小部件。
Over this is a search input form. I don't want the input to show before the image has loaded.
这是一个搜索输入表单。我不希望在图像加载之前显示输入。
Is there a way to attach an loadevent handler to CSS background images like normal img elements/objects?
有没有办法将load事件处理程序附加到 CSS 背景图像，如普通的 img 元素/对象？
I know this could be done on a normal image, but I'd like to keep it as a CSS background because the image is part of a sprite. I am using jQuery, so solutions using jQuery or plain DOM JS are equally good.
我知道这可以在普通图像上完成，但我想将其保留为 CSS 背景，因为该图像是精灵的一部分。我正在使用 jQuery，所以使用 jQuery 或普通 DOM JS 的解决方案同样好。
回答by Félix Saparelli
You could load the same image using the DOM / a hidden image and bind to the loadevent on that. The browser's caching should take care of not loading the image twice, and if the image is already loaded the event should fire immediately... not tested, tough.
您可以使用 DOM/隐藏图像加载相同的图像并绑定到该load事件。浏览器的缓存应该注意不要两次加载图像，如果图像已经加载，事件应该立即触发......没有测试，很难。
回答by mutex
In chrome, using .ready() of jQuery seems to work for me. Here's my fiddle:
在 chrome 中，使用 .ready() 的 jQuery 似乎对我有用。这是我的小提琴：
The image is just a random one I selected that is reasonably large - it actually takes a very long time to load in some of my tests, so may be worth replacing with something a bit smaller. But the end result is what you want I think: It takes a while to load, and once it's loaded the alert and then textbox (#txt) displays. Seems to work in Firefox too; not sure about other browsers.
该图像只是我随机选择的一个相当大的图像 - 在我的某些测试中加载实际上需要很长时间，因此可能值得用更小的图像替换。但我认为最终结果是您想要的：加载需要一段时间，一旦加载，就会显示警报，然后显示文本框 (#txt)。似乎也适用于 Firefox；不确定其他浏览器。
EDIT: Hah, it seems to work in Chrome, Firefox and Safari. Doesn't work in IE8. So... it works in all real browsers :)
编辑：哈，它似乎适用于 Chrome、Firefox 和 Safari。在 IE8 中不起作用。所以......它适用于所有真实的浏览器:)
EDIT2: After much fiddling, a combination of Allesandro and my own solution seemsto work. I use .ready() on a hidden img to detect when the image is actually loaded, then load it into CSS background.
EDIT2：经过多次摆弄，Allesandro 和我自己的解决方案的组合似乎有效。我在隐藏的 img 上使用 .ready() 来检测图像何时实际加载，然后将其加载到 CSS 背景中。
HTML:
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:
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:
CSS：
#testdiv {
background:#aaaaaa none no-repeat right top;
width: 400px;
height: 400px;
}
#txt{
margin-left: 180px;
margin-top: 140px;
}
NOTE: There is a comment below about this not working because you can change the url of the image and it still fires the loaded event. This is in fact working pretty much exactly as I'd expect given the current code - it doesn't check if the url you're pointing to for your "image" is valid and really an image, all it does is fires an event when the img is ready and change the background. The assumption in the code is that your url points to a valid image, and I think any further error checking is not really needed given the question.
注意：下面有一条关于这不起作用的评论，因为您可以更改图像的 url 并且它仍然会触发加载的事件。这实际上与我对当前代码的期望完全一样 - 它不会检查您指向“图像”的 url 是否有效并且真的是图像，它所做的只是触发一个事件当 img 准备好并更改背景时。代码中的假设是你的 url 指向一个有效的图像，我认为考虑到这个问题，不需要任何进一步的错误检查。
回答by Ric Flair
You can try this, it's pretty basic.
你可以试试这个，这是非常基本的。
function onImageLoaded(url, callback) {
const img = new Image();
img.src = url;
img.onloadend = callback; //Image has loaded or failed
return;
}
It will work for background images and img tags.
它将适用于背景图像和 img 标签。
回答by Alessandro Pezzato
do not set background in css, but load the image into an img tag created with javascript (or better, jquery). once loaded, it will fire the load event. when this event is fired, apply the style property to your div
不要在 css 中设置背景，而是将图像加载到使用 javascript（或更好的 jquery）创建的 img 标签中。一旦加载，它将触发加载事件。触发此事件时，将样式属性应用于您的 div
