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

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

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

やり方

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

 

これ以外の方法

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

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

お問い合わせ

    お気軽にお問い合わせください。
    お電話やご訪問での営業はいたしませんので、ご安心ください。

    お名前

    メールアドレス

    電話番号

    お問い合わせ内容