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.
    }
});

Answer 2

You could use an asynchronous image loader with a callback to an event which shows the divs holding the images. Here are some async loaders:

• JAIL (jQuery Asynchronous Image Loader)
• Image Loader JQuery Plugin
  • Note: See the allcomplete event on that page.

Also, an SO q/a that might be helpful: Preloading images with jQuery

Answer 3

I can confirm that the 'ImagesLoaded' Plugin works for me.

Use like so:

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
  console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
  console.log('#container background image loaded');
});