CODEWITHSUNDEEP
htmlcssperformanceimagehttp
ryanve
ryanve

Reputation: 52531

Do images w/ display:none still make an HTTP request?

In stylesheet:

#sj {display: none}

In HTML:

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

Does an HTTP request for the image happen or not?

Upvotes: 13

Views: 5945

Answers (4)

Eryk Wr&#243;bel
Eryk Wr&#243;bel

Reputation: 445

You can test if there was a request in browser console ctrlshift + J and in Network section filter Img elements and see if they are loaded upon refresh.

Well, this is how You can test it but I am here because of that I was to lazy to check this by myself and it was faster to look for it on stackoverflow :)

Upvotes: 1

Joe_Temp
Joe_Temp

Reputation: 91

There is a way to prevent an HTTP request when using display:none. You need to make the image a background-image in CSS and set the parent element to 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;
    }
}

Here is a link where you can read about all sorts of tests on this issue.

Upvotes: 7

Abdullah Jibaly
Abdullah Jibaly

Reputation: 54790

Yes, the request still goes out but the image is not displayed.

Upvotes: 2

Andrew Moore
Andrew Moore

Reputation: 95354

Yes, they still cause an HTTP request. Example: http://jsfiddle.net/RzFG2/

Upvotes: 9

Related Questions