Say there is a css style declaration to an element which has been set display:none (not displayed on screen) and it also has a background image set.
Lets say this element is displayed on an event such as a mouse click. Would the browser load these images even before the element is displayed? Is this load behaviour consistent across browsers?
No, browsers I’ve tested before do not.
if you do want to load the image, try using
background-position: -1000px -1000pxwhich does work. It won’t show the image, but it will be preloaded. However, the element will be in the normal flow, i.e. not hidden.