レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。
backgroundプロパティであればメディアクエリで切り替えられますが、imgタグで指定したい場合には使えません。
そこで今回は、jQueryで画像ファイル名の一部を置換して表示する画像を切り替える方法です。
スマホサイトの時の画像名
「img_keyvisual_01_sp.jpg」
PCサイトの時の画像名
「img_keyvisual_01_pc.jpg」
この末尾のspとpcを変える事でウィンドウサイズに適した画像に差し替える事が出来ます。
「replaceWidth」で設定する値をもとに
ウィンドウサイズがそれ以上だったら画像ファイル名「_pc」が付いているものを表示し、
それ以下だったら画像ファイル名「_sp」が付いているものを表示します。
window.innerWidth
「window.innerWidth」とはブラウザウィンドウの ビューポート (viewport) の幅を取得出来る。
thisと$thisの違い
- 「$(this)」はjQueryオブジェクト。
- 「this」はDOMエレメント。
違いを簡単に説明すると、イベントが発生した要素に対して、javaScriptのメソッドやプロパティを利用したい時は「this」利用し、jQueryで操作したい時は$(this)を利用してjQueryオブジェクトに変換してから利用する。
「this」の持つ情報はjavaScriptで操作できる「DOM要素」です。イベントで設定したfunction内で利用した場合はイベントが発生したDOM要素を指します。
ウィンドウサイズによる画像置換を行いたい画像に「.switch」を追加
<img src="img/img_keyvisual_01_sp.jpg" alt="#" class="switch">
jQueryの記述
$(function(){ //ウィンドウサイズによる画像置換 var sizeChange = $('.switch'), // 置換の対象とするclass属性。 pcName = '_pc', // 置換の対象とするsrc属性の末尾の文字列 spName = '_sp',// 置換の対象とするsrc属性の末尾の文字列 replaceWidth = 641; // 画像を切り替えるウィンドウサイズ。 sizeChange.each(function(){ var $this = $(this); function imgSize(){ if(window.innerWidth > replaceWidth) { // ウィンドウサイズが641px以上であれば_spを_pcに置換する。 $this.attr('src',$this.attr('src').replace(spName,pcName)); } else { $this.attr('src',$this.attr('src').replace(pcName,spName)); } } $(window).resize(function(){imgSize();}); imgSize(); }); });