On page load, will mypic.jpg get downloaded by the browser?

Question

#test1 {
    display: none;
}
#test2 {
    background-image: url('mypic.jpg');
    visibility: hidden;
}

<div id="test1">
    <span id="test2"></span>
</div>

Please provide the reason why yes or no.

Answer 1

在上述情况下，不会。

通常，如果将CSS属性设置为

display: none

浏览器仍会下载它，因为可能会在DOM中对其进行动态更改。但是，如果您希望这样做，则不应下载图像，然后将您的图像或至少要隐藏的图像用作背景图像。

  

如果元素被隐藏，则不会加载背景图片。

Answer 2

All resources will be downloaded to user computer, so yes, it will.

Browser will not re-download resource if it already has copy of it in local cache and it's content not changed and time not expired.