上記のソースだと、ページの初回ロード時しか動作しません。
目的の処理をしたいのであれば
onメソッド等を利用して、ウィンドウサイズが変わる度に
ウィンドウサイズを取得して判定しなければなりません。
と、いうわけで....
lang
1<style>
2 /* 常に縦スクロールバーを出しておく*/
3 html{overflow-y: scroll;}
4</style>
5
6<a href="#"><img src="img/img_pc.png" class="imgChange" alt="変わる画像"></a>
lang
1$(function(){
2
3 var
4 $img = $(".imgChange"), //対象の画像セレクタ
5 imgSrc = $img.attr("src"), //画像ファイル名
6 windowWidth = 0, //ウィンドウサイズ保持用
7 limitWidth = 767; //ウィンドウサイズ判定用
8
9 /**
10 * ウィンドウサイズを再取得し、指定の幅(limitWidth)未満になったら
11 * 画像ファイルを置換する関数
12 */
13 function windowWidthCheck(){
14
15 //windowの幅を再取得
16 windowWidth = $(window).width();
17
18 //画像ファイル名を置換
19 if(windowWidth < limitWidth) imgSrc = imgSrc.replace("_pc", "_sp");
20 else imgSrc = imgSrc.replace("_sp", "_pc");
21
22 //画像ファイル名を再セット
23 $img.attr({src:imgSrc});
24
25 }
26
27 //初回ロード時に1回判定しておく
28 windowWidthCheck();
29
30 //ウィンドウリサイズする度に判定
31 $(window).on("resize", windowWidthCheck);
32
33 });
等とすれば、とりあえず動作します。
ですが、これだとウィンドウサイズを変える度(ブラウザの端をドラッグしている間ずっと)に
この判定をするわけなので、例えばページ内の画像を全て置換するとなると
処理がかなり重くなってしまいます。
Lhankor_Mhyさんが貼られてるヒントは、その対策の1つという事です。
ウィンドウサイズを変更した後のみ判定するといった
処理軽減の工夫が必要となります。
参考にまでどうぞ。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/02/28 17:11