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

*note: not concerning img tags. strictly question css background images.

i trying make nice ajax-based template not refresh page, rather exchanges content within specific div. working well, except background images never loaded time newly loaded div revealed user. expect process this:

1. html content loaded.
2. the css images begin load asynchronously.
3. the callback function runs completion.

for sake of testing, delayed reveal make sure images have time load before function finished. 5 seconds, still displays blank boxes images should second before loading, no matter how long it's delayed. leads me conclude flow must acting more this:

1. html content loaded.
2. the callback function runs completion.
3. the css images begin load asynchronously.

the "load" event not seem account css images, , there not seem event allows script wait css images finish loading.

i tried hacking around looping through every single element, checking presence of background image, creating new image() load event each one, that, needless say, exceeds call stack.

so question is, how can wait background images display before moving forward script?

only once css applied element load images , other external resources. loading <img> tags easier handle (see this question , answer). but, take advantage of caching , force images loaded before .load() call using 1 of few different approaches in html, css or js, follows:

html: add html tag <link rel="prefetch" href="image.png"> each image

css: load images hidden element exists on initial load (see this answer).

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

no matter of these approaches pick, need specify images preloaded. none of these solutions automatically pick image paths css.

note: each of these approaches may have varying cross-browser support. recommend double-checking project requirements before using of them.