質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

4994閲覧

ウィンドウサイズを変更した時点で画像を変えたいです

cotton88

総合スコア87

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2015/02/26 11:31

以下のjQueryでウィンドウサイズが767px以下になったら指定の画像を変える処理をしています。

ですが、ブラウザを更新しないと画像が切り替わりません。

ブラウザサイズを変更して確認するときや、タブレットをランドスケープモードにした時などに、更新なしで画像を変えたいです。

そんな事は可能でしょうか?

lang

1<a href="./"><img src="img/top01_pc.jpg" width="300" height="100" class="imgChange" alt="" /></a>

lang

1// 画面サイズを取得 2var wid = $(window).width(); 3var sp_windowWidth = 767; 4 5if((wid < sp_windowWidth) && ($.cookie("switchScreen") != 1)) { 6 $('img.imgChange').each(function() { 7 $(this).attr("src",$(this).attr("src").replace('_pc', '_sp')); 8 }); 9};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

リサイズとタイマーを使うのは良いとして、

タイマー発火ごとにlocation.reload()している意図が見えません。
というより、このやり方はお勧めできません。

1.リロードする頻度が高くなる可能性があり、サーバーへの負荷が重くなる
2.リロードする度画面がチカチカするのでユーザー側としても良くない。

location.reloadの部分を消して、画像を置換する処理に変えてはどうでしょうか?

また、あくまで予想ですが
PCサイトとスマホサイトに分けて画像を表示したいということでしょうか?
もしそうなら、jsを使わずともCSS3とmediaqueryを使えば画像切り替えは出来ると思います。

投稿2015/02/26 16:50

編集2015/02/26 17:19
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

benzo

2015/02/28 17:11

欲しい回答ではないかもしれないんですが、確かにこれはCSSでやったほうが得策だと思います。
guest

0

これでいいような…

(function(){
$(document).ready(function(){

$(window).resize(function()
{
// 画面サイズを取得
var wid = $(window).width();
var sp_windowWidth = 767;

if((wid >= sp_windowWidth) || ($.cookie("switchScreen") == 1)) { return false; } $('img.imgChange').each(function() { $(this).attr("src",$(this).attr("src").replace('_pc', '_sp')); });

})

});

})(jQuery);

即時関数でwrapしときました。

投稿2015/03/03 14:54

編集2015/03/03 15:00
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

上記のソースだと、ページの初回ロード時しか動作しません。

目的の処理をしたいのであれば
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/26 13:27

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cotton88

2015/02/26 15:58

ご回答ありがとうございます。 着実に目的に近付いている気がします。 本来の目的は、更新なしで画像を切り替えるという事でしたが、 それよりウィンドウのリサイズが完了した時点でリロードをして 画像ファイル名を切り替える、という方がフィットしている様なので という事でこんなの書いてみました。 パフォーマンスなどはどうなのでしょうか。 function windowRefresh() { var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { location.reload(); }, 500); }); }; windowRefresh(); $(window).on("resize", windowRefresh);
guest

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cotton88

2015/02/26 12:43

ご回答ありがとうございます! そのヒントを元に色々試してみたんですが、先は長いようでして・・・。 $(window).on("resize", ReLayout); function ReLayout() { var wid = $(window).width(); var sp_windowWidth = 767; if(wid <= sp_windowWidth) { location.reload(); }; };
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問