jQuery - Wait till background images have loaded then show element

Question

I did find a few places where it was told how to do this but it was either super inconvenient or just didnt work.. ( the guys own example did not work.. )

Basically i have background images that i would like to show at the same time instead of letting them to load in to the document when ever they please...

I dont necessarily need them to be loaded first or anything but to wait until specific background images load up and then show their parent div..

Also if its possible.. it would make big difference if those background images could be defined to be loaded through classes rather than specifying the actual image name... like

.load-bg ~ background load ~ show element..

Am i reaching for the moon or is this doable?

Answer 1

My plugin, waitForImages, allows you to attach callbacks when images have loaded.

It supports images referenced in the CSS.

$('#some-container').waitForImages({
    waitForAll: true,
    finished: function() {
        // Loaded all images referenced in CSS.
    }
});