jQueryでウィンドウサイズによって読み込む画像を切り替える

投稿日：2017年1月21日

JQuery logo

サイトデザインの確認のために、
全体を一枚のJPGで書き出してサクッとブラウザで確認してもらいたい時に
ブラウザの幅を広げると大きな画像に、狭めると別に用意した小さな画像を表示させたい！

HTMLだけでは画像の差し替えは出来ないし、
CSS のbackground-imageとメディアクエリでやってみたけどうまくいかない。
長ーーーい縦スクロークがうまく表示されないのだ。

いつものようにググってみると、
jQueryで実現出来るらしい。

■設置手順

まずはじめに、画像を用意。
画像ファイルは末尾に_spと_pcのついた2種類を用意して、マークアップ時には_spを記述しておく。

ってことは、○○○_sp.jpgと○○○_pc.jpgの画像を用意して、
HTMLには、spの方だけ書いておくのね。

＜HTMLの記述＞

&lt;img src="image_sp.png" alt="" class="js-image-switch"&gt;

＜HTMLの記述＞

画像を切り替えるためのスクリプトはこれ。

$(function() { 
// 置換の対象とするclass属性。
</code><span style="font-family: Consolas, Menlo, Courier, monospace; font-size: 0.92857rem; line-height: 1.4; background-color: transparent;"> var $elem = $('.js-image-switch'); 
// 置換の対象とするsrc属性の末尾の文字列。 
 var sp = '_sp.'; 
 var pc = '_pc.'; 

// 画像を切り替えるウィンドウサイズ。
 var replaceWidth = 768; 

function imageSwitch() { 
// ウィンドウサイズを取得する。
 var windowWidth = parseInt($(window).width()); 

// ページ内にあるすべての`.js-image-switch`に適応される。
 $elem.each(function() {
 var $this = $(this); 
 // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
 if(windowWidth &gt;= replaceWidth) { 
 $this.attr('src', $this.attr('src').replace(sp, pc));

 // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
 } else { 
 $this.attr('src', $this.attr('src').replace(pc, sp)); 
 } 
 });
 }
 imageSwitch(); 

// 動的なリサイズは操作後0.2秒経ってから処理を実行する。
 var resizeTimer;
 $(window).on('resize', function() { 
clearTimeout(resizeTimer); 
resizeTimer = setTimeout(function() {
 imageSwitch();
 }, 200); 
　}); 
});</span>

$(function() {

// 置換の対象とするclass属性。

</code><span style="font-family: Consolas, Menlo, Courier, monospace; font-size: 0.92857rem; line-height: 1.4; background-color: transparent;"> var $elem = $('.js-image-switch');

// 置換の対象とするsrc属性の末尾の文字列。

var sp = '_sp.';

var pc = '_pc.';

// 画像を切り替えるウィンドウサイズ。

var replaceWidth = 768;

function imageSwitch() {

// ウィンドウサイズを取得する。

var windowWidth = parseInt($(window).width());

// ページ内にあるすべての`.js-image-switch`に適応される。

$elem.each(function() {

var $this = $(this);

// ウィンドウサイズが768px以上であれば_spを_pcに置換する。

if(windowWidth >= replaceWidth) {

$this.attr('src', $this.attr('src').replace(sp, pc));

// ウィンドウサイズが768px未満であれば_pcを_spに置換する。

} else {

$this.attr('src', $this.attr('src').replace(pc, sp));

}

});

}

imageSwitch();

// 動的なリサイズは操作後0.2秒経ってから処理を実行する。

var resizeTimer;

$(window).on('resize', function() {

clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

imageSwitch();

}, 200);

　});

});</span>

このスクリプトはHTMLファイルの中の<head></head>の間に<script></script>で囲って記述。

サーバーにアップして、ページを確認するとバッチリ！！思った通りの動きです。
下記ページで公開しているスクリプトを使わせていただきました。
解説もくわしく載っているので、とってもわかりやすかったですよ。
TAM inc.様に感謝！

参照：http://www.tam-tam.co.jp/tipsnote/javascript/post8851.html

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

執筆者：kobato