Do hidden elements load background images?
One thing I have always pondered about is whether elements that are hidden will load any images associated with it, either inline or through CSS, directly at page load. And apparently, my colleague Jonatan Larsson has as well. Jonatan and I discussed this back and forth, how it actually works and how we’d want it to work. Both he and I felt fairly certain that if an element, for instance, had a background image associated with it but was hidden (i.e. has display: none), it wouldn’t load its background image until it was shown. So, Jonatan set about on doing some tests and his findings were that images for hidden elements, set via CSS or inline in the element, would load every time – contrary to what we thought/expected. Part of me thinks this is good that when the element is shown, everything is already loaded and will look good, but the performance fan in me is thinking that a web browser should only load what is actually displayed. What would you want or expect?
