ウインドウのリサイズ終了後に画面をリロードする方法

code-583073_1280

ハイ! リサです。

レスポンシブ・デザインのサイトで、フル画面の画像tickerを使ったのですが、小さい画面からブラウザのウインドウを広げた際、画像が足りない現象が起きてしまいました。
これをに対策するために簡単なのはリロードすることでした。

スポンサーリンク
スポンサーリンク

スライダープラグイン

フル画面の画像tickerを実現するために「かえラボ」さんの「slider.js」を使わせていただきました。

参照jQueryプラグインなスライダー slider.js(かえラボ)

現象

ブラウザ画面を大きくドラッグするとフル画面の画像が途中で終わってしまいます。

※上のウインドウサイズから下のウインドウサイズに変更した際の現象

t1t2

原因はウインドウサイズを小さい状態で、「slider.js」が画像を連続させていたので、大きくすると画像幅が足りなくなってしまうという単純なものです。

回避策:ウインドウのリサイズ操作が終わった時にリロード

そこで、大きいウインドウサイズにした際に、画面をリロードすれば「slider.js」がウインドウサイズを再認識し、画像をフルに並べてくれると考えました。
本当は画面サイズを大きくしたときだけの処理なので、画面サイズをリサイズ前後で判定して処理してもいいのですが、今回はシンプルに大小を問わずウィンドウリサイズした際に処理することにしました。


$(function(){
var timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
//リロードする
location.reload();
}, 200);
});
});

リサイズトリガーとタイマー処理は以下のページを参照しました。

参照[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する(CreativeStyle)

画面リサイズ時に、リロードで画面状態を初期化したいとき役立つと思います。

やってみてね。

関連記事スマホのウインドウリサイズと後処理の問題とユーザーエージェントの判別

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする