Wait for background images in CSS to be fully loaded [duplicate]

Answer 1

Check out this answer to a similar question:

I wrote a plugin that can fire callbacks when images have loaded in elements, or fire once per image loaded.

It is similar to $(window).load(function() { .. }), except it lets you define any selector to check. If you only want to know when all images in #content (for example) have loaded, this is the plugin for you.

It also supports loading of images referenced in the CSS, such as background-image, list-style-image, etc.

waitForImages jQuery plugin

• GitHub repository.
• Readme.
• Production source.
• Development source.

Example Usage

 $('selector').waitForImages(function() {
     alert('All images are loaded.');
 });

Example on jsFiddle.

More documentation is available on the GitHub page.

Answer 2

There are no DOM events associated with CSS backgrounds. You'd have to count the images, assign onload events and add them as new Image() via JS, increment a counter as they load.

Answer 3

If you have an element with a background image, like this

<div id="test" style="background-image: url(link/to/image.png)"><div>

You can wait for the background to load by getting the image URL and using it for an image object in javascript with an onload handler

var src = $('#test').css('background-image');
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
    alert('image loaded');
}
img.src = url;
if (img.complete) img.onload();

Answer 4

Contrary to what I had read about "no DOM events associated with CSS backgrounds", indeed my tests reveal that in modern browsers:

$(window).load(function() {
// all images loaded
});

does the trick. It only fires after loading the external images in external CSS.

I put a few 20+ meg image backgrounds in place to verify.

If this hadn't worked, Plan B was using data URIs, but I am glad it didn't come to that.

Thanks for the replies!