2

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?

Swiss Mister
  • 3,260
  • 2
  • 20
  • 42
  • 1
    The browser will only read/render the css styles once the selector rule is met... So, an image loaded with `url()` will only be downloaded once an element meets the selector containing this rule – LcSalazar Dec 16 '14 at 12:37
  • http://deanhume.com/home/blogpost/loading-css-asynchronously/7104 – Justinas Dec 16 '14 at 12:37
  • http://www.appelsiini.net/projects/lazyload/enabled_background.html – Justinas Dec 16 '14 at 12:38
  • Thanks @LcSalazar! Do you have a source for this assertion? If so - that would be the answer to this question... – Swiss Mister Dec 16 '14 at 13:06
  • possible duplicate of [Are unused CSS images downloaded?](http://stackoverflow.com/questions/2396909/are-unused-css-images-downloaded) – LcSalazar Dec 16 '14 at 13:08
  • This does indeed look like sort of a duplicate, and I guess I'll have to go with heuristics then. Thanks! – Swiss Mister Dec 16 '14 at 13:20

0 Answers0