0

Will CSS load a url() attribute even if the selector does not apply to any element in the DOM?

.not-box {
  background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded');
}

div.box {
  background-image: url('https://cdn.iconscout.com/icon/free/png-512/stackoverflow-2752065-2284882.png');
  height: 100px;
  width: 100px;
}
<div class="box"> dssa</div>

So My Question is that Will the url() inside the .not-box selector load the image even if it is not used in the dom.

I am concerned about the loading time utilized in images which are not needed for the page in css.

Thanks for helping.

Student Edge
  • 1
  • 1
  • not it will not load it. Even if it's a hover state it won't load until you hover it (related: https://stackoverflow.com/a/51357420/8620333 ) – Temani Afif Jun 17 '21 at 12:45
  • Why dont you try it out? Look into the network panel of your browsers dev tools (like chrome). My bet is "no" ;) – Alex Jun 17 '21 at 12:45
  • No it's not, to validate if it is loaded or not go to browser inspect elements > network > img. Here you can see the images that the page only loaded. – cbrr09 Jun 17 '21 at 12:55

0 Answers0