I want to load CSS background images asynchronously in a non-blocking way.
I can see in Chrome that if I put the image into a class and load the image by adding the class to the DOM element, it works. Demo:
setTimeout(function(){$("#imageContainer").addClass("imageClass");},10000);
The network monitor shows that the actual image file is only loaded when the class is applied.
However, I imagine the browser might as well already load the image file when it loads the CSS (which would probably block rendering).
Question:
Does the standard demand that the image file is only loaded when the class is applied?
I am sorry I wouldn't even know where to start looking for this detail.
Addendum: same question goes for font files, too! If a fancy font is part of one class and the class is applied asynchronously - will the font file also be loaded asynchronously?