CSS文件何时检索background-img URL？

Question

When a .css file uses a url for an image file, does the client retrieve that image when the .css file is loaded or does it wait until the specific class is assigned to an element?

For example -

A user loads home.html with style.css referenced in the header. The home page does not include any elements with class attach_background_image , but within style.css we have

.attach_background_image{
    background-image:URL(background.png);
}

Will background.png be retrieved when home.html is hit? Or does the image only get requested when an element meets the css selector criteria?

Answer 1

当加载类.attach_background_image时，将在页面加载时检索它

Answer 2

The whole CSS-file is loaded on page-load, so that's when the file will be retrieved. That the CSS in the file isn't actually used anywhere doesn't matter.

EDIT Sorry, I realised the original answer was wrong - the CSS file is loaded (all of it), but the external resources are loaded on a on-use basis, so until that class or element is present on the page, it will not run the GET-request to fetch it.

That means that if you for instance have a javascript change classes, the image will get retrieved, which of course can lead to slightly longer load-times than expected (depending on where the resource is located, and the size of the image)