是否显示图像:none仍然发出HTTP请求?

时间:2011-07-16 20:25:04

标签: html css performance image http

在样式表中:

#sj {display: none}

在HTML中:

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

是否发生了对图像的HTTP请求?

4 个答案:

答案 0 :(得分:9)

是的,它们仍会导致HTTP请求。示例:http://jsfiddle.net/RzFG2/

答案 1 :(得分:6)

使用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,您可以在这里阅读有关此问题的各种测试。

答案 2 :(得分:2)

是的,请求仍然消失但图像未显示。

答案 3 :(得分:1)

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

嗯,这就是你可以测试它的方法,但我在这里是因为我懒得自己检查一下,在stackoverflow上寻找它更快:)