display:none的图片是否仍会发出HTTP请求？

Question

在样式表中：

#sj {display: none}

HTML中：

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

发送图片的HTTP请求是否会发生？

- ryanve

Answer 1

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

- Andrew Moore

Answer 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;
    }
}

这里是一个链接，你可以阅读有关此问题的各种测试。

- Joe_Temp

---

在不给父级 div 设置 display:none; 的情况下，使用 background-image css 属性中的图像会发出任何请求吗？ - Sohil Shah

Answer 3

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

- Abdullah Jibaly

Answer 4

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

这就是测试的方法，但我在这里是因为我懒得自己检查，而在stackoverflow上查找更快 :)

- Eryk Wróbel