jQuery .load() does not begin loading CSS background images until AFTER the callback function completes

Question

*Note: This is not concerning img tags. This is strictly a question about CSS background images.

I am trying to make a nice ajax-based template that does not refresh the page, but rather exchanges the content within a specific div. Everything is working well, except that the background images are never fully loaded by the time the newly loaded div is revealed to the user. I would expect the process to look like this:

1. HTML content is loaded.
2. The CSS images begin to load asynchronously.
3. The callback function runs to completion.

For the sake of testing, I delayed the reveal just to make sure the images would have time to load before the function finished. Even with 5 extra seconds, it still displays blank boxes where images should be for a second before loading, no matter how long it's delayed. This leads me to conclude the flow must be acting more like this:

1. HTML content is loaded.
2. The callback function runs to completion.
3. The CSS images begin to load asynchronously.

The "load" event does not seem to account for CSS images, and there does not seem to be any event that allows a script to wait for the CSS images to finish loading.

I even tried hacking around it by looping through every single element, checking for the presence of a background image, then creating a new Image() with a load event for each one, but that, needless to say, exceeds the call stack.

So my question is, how can I simply wait for all background images to fully display before moving forward with the script?

Answer 1

Only once CSS is actually applied to an element does it load images and other external resources. Loading <img> tags are much easier to handle (see this question and answer). But, you COULD take advantage of caching and force the images to be loaded before that .load() call by using one of a few different approaches in HTML, CSS or JS, as follows:

HTML: Add an HTML tag to your like <link rel="prefetch" href="image.png"> for each image

CSS: Load all the images into some hidden element that exists on the initial load (see this answer).

JS: You can have JS load each image on page load (see this answer)

No matter which of these approaches you pick, you would need to specify the images to be preloaded. None of these solutions automatically pick up the image paths from the CSS.

NOTE: Each of these approaches may have varying cross-browser support. I would recommend double-checking your project requirements before using any of them.