search
LoginSignup
18

More than 3 years have passed since last update.

posted at

updated at

Organization

CSSの "display: none" と画像ロード処理について

CSSの display: none で画像を非表示にした場合に、「画像ファイルのロード処理が発生するか否か」についてブラウザ間で若干の差異があったため、下記にまとめました。

HTML
<!-- [1] <img>要素に対して "display: none" -->
<img src="1.jpg" style="display: none;">

<!-- [2] background-imageを指定した要素に対して "display: none" -->
<span style="background-image: url(2.jpg); display: none;"></span>

<!-- [3] <img>要素の親要素に対して "display: none" -->
<p style="display: none;"><img src="3.jpg"></p>

<!-- [4] background-imageを指定した要素の親要素に対して "display: none" -->
<p style="display: none;"><span style="background-image: url(4.jpg);"></span></p>
[1] [2] [3] [4]
Chrome (74.0.3729.131) -
Firefox (66.0.4) - -
Safari (12.1) - -
Edge (42.17134.1.0) -
Internet Explorer (11.0.120) -

●: 画像ファイルがロードされる

主要ブラウザにおいては、
画像を background-image として指定し、その親要素を display: none にする
という条件では画像ロードが発生しないようです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18