jQueryで画像の切り替えをするコードを作りたいのですが、同じ画像は1回しか記述したくありません。何度も画像名を書かなくてもよい書き方はありませんか？

Question

jQueryを使って、画面サイズが768px未満のときはimg1.pngを表示し、画面サイズが768px以上のときはimg2.pngを表示しようとしています。

そこで次のコードを書きました。

<div>
    <img src="img/img1.png" alt="">
</div>

$(window).on('load resize', function () {
    
    var w = $(window).width(); // 画面サイズ
    var x = 768; // 切り替えサイズ
    
    if (w < x) {
        $('img').attr('src', 'img/img1.png');  
    } else {
        $('img').attr("src", 'img/img2.png');
    }
    
});

しかしこのコードで不満なのは、img1.pngという画像をHTMLとjQueryとで、合計2か所に記載していることです。

今回は画像の入れ替えはimg1.pngとimg2.pngの2つだけなので、2か所に記入したところで大したことはありませんが、仮にたくさん画像を入れ替えなければならない場合、同じ画像名を2か所に書かなければならないのは手間です。

同じ画像名は1回だけ書けば済むようにしたいのですが、どのような記述をすればよいでしょうか。

よろしくお願いします。

Answer 1

ご質問のケースだと、<picture>を使った方が楽そうですね。
<picture>: 画像要素 - HTML: HyperText Markup Language | MDN

Comments

[cheshire-cat]

ありがとうございます。
picture要素は知りませんでした。どのような使い方が効果的か、探ってみます！

Answer 2

window.loadも入れられてるのでしたらhtmlタグ側のsrcはさいあくなくても良いと思います。
display:noneしといてattr終わったらshowするとかで対応可能です。

img/が何回も出てくるのは良いのですか？
まあディレクトリが同じなら変数に定義しておけばよいですけど。
連番なら画像パスを毎回直に書くのも私なら気になりますが、どこまで対応したいかですね。

Comments

[cheshire-cat]

素早い回答ありがとうございます。
なるほど、HTML側はなくてもいいんですね。

いままでずっとHTML側のimgを書いてきたので、「なくてもいい」といわれると、慣れるまではエディタ上のHTMLのコードに違和感を感じるかもしれませんね。

[m.ts10806]

imgタグは書きますがsrcを空にするだけです。
あとはcssでdisplay:none
noneにするので書いてても書いてなくても良いですけどね。