带有 display:none 的图像是否仍然发出 HTTP 请求？答案

【问题标题】：Do images w/ display:none still make an HTTP request?带有 display:none 的图像是否仍然发出 HTTP 请求？
【发布时间】：2017-09-27 16:24:10
【问题描述】：

在样式表中：

#sj {display: none}

在 HTML 中：

<img id="sj" src="scarlett-johansson.jpg" width="640" height="360" alt="scarlett johansson" />

对图像的 HTTP 请求是否发生？

【问题讨论】：

标签： html css performance image http

【解决方案1】：

是的，它们仍然会引发 HTTP 请求。示例：http://jsfiddle.net/RzFG2/

【讨论】：

【解决方案2】：

当使用display:none 时，有一种方法可以阻止 HTTP 请求。您需要在 CSS 中将图像设为background-image，并将父元素设置为display:none。

HTML：

<div id="test3">
    <div></div>
</div>

CSS：

#test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test3 {
        display:none;
    }
}

这是link，您可以在其中阅读有关此问题的各种测试。

【讨论】：

在 background-image css 属性中使用图像而不给父 div display:none;有什么要求吗？

【解决方案3】：

是的，请求仍然发出，但图像不显示。

【讨论】：

【解决方案4】：

您可以在浏览器控制台 ctrlshift + J 和 Network 部分测试是否有请求过滤 Img 元素并查看它们是否在刷新时加载。

嗯，这就是你可以测试它的方式，但我在这里是因为我懒得自己检查这个，在stackoverflow上查找它更快:)

【讨论】：