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

Question

I have a web app that uses external background images loaded in external CSS. Right now, it is possible to use the app before the images have fully rendered, creating weird visual effects.

How can I halt script execution until the images are fully loaded?

It can use normal JavaScript or jQuery. Because the images are loaded in external CSS the normal triggers I have read about don't work.

Answer 1

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 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.