レスポンシブ【JSで画像切り替え】/「display:none」で切り替えたくないときに

スポンサーリンク

備忘。
「display:none」で切り替えたくないときに。

これならばページを開いたタイミングで全ての画像を読み込まないため、軽量化できる。

やり方

class=”switch”が記述されている画像のみ切り替わります。

 

これ以外の方法

他にも以下の方法がありますが、IEや旧ブラウザに対応していないものもあります。
とくに、レガシーブラウザに対応させる場合は、いまのところjavaScriptが確実と思います。

  • <img srcset=”~○x”>
  • backbround-image:image-set
  • <picture>