課題 mobileFirst / 画像置換

ウィンドウサイズによって画像を変える。

• imgに文字要素が含まれている場合、画像が小さくなると当然文字も小さくなる。
• PCの横長、SPの縦長を一つの画像で賄うことにはそもそも無理がある。
• 変換するファイルにはクラス名をつける。今回の場合「convert」というクラス名をつけた。
• 入れ替える画像のファイル名は接尾辞のみ変えておく。
• PC用は「****_pc.jpg」SP用は「****_sp.jpg」といった具合。
• var convert=$('.convert');「convert」クラスがついた要素全体のオブジェクトを変数化。
• var eachOne=$(this);「convert」クラスがついた要素それぞれ一つ
• 「.each」セレクタで指定したjQuery object、それぞれに対して関数を反復して実行する。
• いま、関数が操作を実行しているjQuery object が「this」。

  so the keyword this refers to the element.

• 「window.innerWidth」スラーダーを除いたウィンドウの横幅全体の長さ。
• $(window).resize(function(){convert();});
  convert();
• 「.resize」resizeはイベント。ウィンドウの幅を変更するという「動作」
• ウィンドウのサイズを変更したときに、function convertを実行する。
• 下段のconvert();は読み込みの具合で、挙動がおかしくならないようにするためらしい。

•  .replaceはjavascriptの関数。jQueryで調べてもでてこない。

 //ウィンドウサイズによる画像置換
$(function(){
var convert=$('.convert');　
var sp='_sp';

var pc='_pc';

var replaceWidth=641;

convert.each(function(){
var eachOne=$(this);

function convert(){
if(window.innerWidth>replaceWidth){
eachOne.attr('src', eachOne.attr('src').replace(sp, pc));
}else{
eachOne.attr('src', eachOne.attr('src').replace(pc, sp));
}
}
$(window).resize(function(){convert();});
convert();
});
});