Is an image that is display: none loaded by the browser?

Question

Are these images loaded by the browser:

<div style="display: none">
   <img src="/path/to/image.jpg" alt="">
</div>

or

<img src="/path/to/image.jpg" alt="" style="display: none;">

By "loaded by the browser" I mean, are these images loaded immediately by the browser so that they are available right away when the image is no longer displayed as none using css. Will it be taken from cache or loaded anew the moment it is no longer displayed as none?

Answer 1

To answer your question, its loaded as soon as the page (or event) is loaded. And typically is used when someone is going to display that element using javasript.