サイトレビュー
【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデ...
2021.02.28
2019.09.27
画像をレスポンシブで切り替える場合に、
cssのメディアクエリを使い、display:none(block)で切り替えている場合が多いかと思いますが
jQueryを使えばhtml上にはPC用の画像のみを設置することで、CSSの記述が不要になります。
①PC用の画像には「xxx-pc.jpg」と命名
SP用の画像には「xxx-sp.jpg」と命名
②PC版の画像のみマークアップし、「rwd」クラス名を付ける
<img src="hoge.jpg" class="rwd"/>
③jQueryに下記を入力する
//切り替えポイント var rwdPoint=768; function slideImgChange(){ if($(window).width()<rwdPoint){ $("img.rwd").each(function(){ var changeImg = $(this).attr('src').replace('-pc.' , '-sp.'); $(this).attr('src', changeImg); }); }else{ $("img.rwd").each(function(){ var changeImg = $(this).attr('src').replace('-sp.' , '-pc.'); $(this).attr('src', changeImg); }); } } //読み込み時の処理 slideImgChange() //リサイズ時の処理 $(window).on('resize', function(event) { event.preventDefault(); slideImgChange(); });
・画像のクラス名の”rwd”とjQuery内の$("img.rwd")
を合わせる
・画像ファイル名の”-pc””-sp”とjQuery内のvar changeImg = $(this).attr('src').replace('-pc.' , '-sp.');
を合わせる
いかがでしたでしょうか。
ぜひご活用ください。
▼▽▼jQueryについての関連記事 ▼▽▼
株式会社スピカデザイン