6

Using a CSS display none will still trigger an HTTP request for images

 3 years ago
source link: http://www.js-craft.io/blog/using-a-css-display-none-will-still-trigger-an-http-request-for-images/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Using a CSS display none will still trigger an HTTP request for images

Let's say we have the following code:

<img src="cat.jpg" style="display:none" />

This will still trigger the expensive HTTP call to get this image. This can be checked in Devtools - Network tab.

The image will still be requested even if we use a media query. 

@media (max-width: 500px) {
    img {
        display: none; 
    } 
}

And even in the case when an img is inside of a hidden parent, the request is still made. 

<div class="hide">
    <img src="cat.jpg" />
</div>

However, using the image as a CSS background-image on a hidden div will not trigger the call.

<div style="hide">
    <div style="background: url(cat.jpg)"></div> 
</div>

I've discovered this while playing with the fun Request Quest made by Jake Archibald. It teaches you in a fun way how and when the requests are made for images. Also from a Javascript perspective. Good to know from a performance point of view.

Cool stuff ! 🙂

I hope you have enjoyed this article and if you would like to get more articles about React and frontend development you can always sign up for my email list.

Newsletter subscribe:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK