Menu
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 load event handler to CSS background images like normal img elements/objects?
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.
310
The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally. Tip: The background image is placed according to the background-position property.
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
Description. The background-repeat CSS property specifies whether the background-image is repeated or tiled after it has been sized and positioned, and how. It is often more convenient to use the shorthand background property.
onload: The onload event is triggered when an image is loaded and is executed.
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.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
