如何判断CSS背景图片何时加载？是否已触发事件？ [英] How can I tell when a CSS background image has loaded? Is an event fired?

问题描述

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

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.

有一种方法可以附加加载事件处理程序的CSS背景图像像正常的img元素/对象？

Is there a way to attach an load event handler to CSS background images like normal img elements/objects?

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

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.

推荐答案

DOM /一个隐藏的图像，并绑定到加载事件。浏览器的缓存应该不会加载图像两次，如果图像已加载，事件应立即触发...未测试，坚韧。

You could load the same image using the DOM / a hidden image and bind to the load event 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.

这篇关于如何判断CSS背景图片何时加载？是否已触发事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！