こんにちは。デザイナーのSUZUKIです。
今回はレスポンシブに役立つリロードする方法を紹介します。
PC用やスマホ用でスクリプトをかき分けることがありますが、
最初に読み込んだ時のスクリプトが残っていて、
ウィンドウサイズを変更したときにうまく動作しないことがあります。
また、全画面の画像がウィンドウサイズを変更したときに画像サイズが足りないこともあります。
特にスライダー系のプラグイン入れているときに陥りやすいですね。
状況ごとに最適な対応方法がありますが、
最終手段としてウィンドウサイズを変更したらリロードする方法が有効なので、
今回はその方法を説明します。
※最終的な方法のみ見たい方は方法3をご覧ください。
方法1
普通に記述すると下記のようになりますが、これには問題があります。
$(window).resize(function() {
// リロード
location.reload();
});
ウィンドウサイズを変更している間も処理をし続けてしまいます。
方法2
そこで、下記はsetTimeoutを使い、指定時間後にリロードを実行させています。
※ここでは200ミリ秒をしていますが、ここは自由に指定できます。
何度もリサイズ処理しないようにclearTimeoutで毎回のイベントを取り消し、最後の一回のみ実行します。
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// リロード
location.reload();
}, 200);
});
これで問題解決と思ったんですが、実はまだ問題がありました。
スマホで確認したところ、スクロールするとリロードされてしまいました。
これは、スクロールするとアドレスバーが小さくなるので、
縦のブラウザサイズが変わると認識されるのです。
方法3
そこでウィンドウサイズ全体ではなく、横幅を取得して、
横幅に変化があった時のみリロードさせるようにしたのが下記の方法です。
$(function(){
var timer = false;
var prewidth = $(window).width();
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
var nowWidth = $(window).width();
if(prewidth !== nowWidth){
// リロード
location.reload();
}
prewidth = nowWidth;
}, 200);
});
});
これで問題なくリロードが実行され、
スクリプトや画像の読み込みが正常になりました。
まとめ
本来は問題ごとに最適な方法があると思います。
いろいろなプラグインを使用するケースが多いので、
どうしてもすべてが正常に処理できない場合がでてきてしまいます。
困ったときは上記の方法を手段の一つとして試してみてください。
それにしても、スマホのスクロールでウィンドウサイズが変わったと
認識されると分かった時は焦りました。
どう対応するか悩みました。
方法3のやり方を説明していた参考サイトには助けていただきました。
本当に感謝です。
参考リンク
下記は参考にしたサイトになります。
詳しく知りたい方はどうぞ。
- レスポンシブなページでリサイズ時にスタイルをリセットしたい
https://qiita.com/Fj0gxKrVL1VsbRb/items/8c6e49e1739bcec64cfd ウインドウのリサイズ終了後に画面をリロードする方法https://www.oysteve.com/post-2028/- ウィンドウリサイズ完了時に一度だけ関数を実行する
http://analogic.jp/window-resize-complete/ - iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法
https://qiita.com/tonkotsuboy_com/items/d32ec6e7a1f6f592d415
