Window リサイズ時にリロードさせる

方法1

.resize() によって、現在の URL でリロードする( location.reload() )

$(window).resize(function() {
location.reload();
});

これだと、ウィンドウを動かしている間中、リアルタイムにリロードが発動するので、ウィンドウサイズが固定されない環境(PC 利用など)には、不適切。
コレでとりあえずしのぎたい、というのは、スマホ専用サイトである場合のみ、かな。

方法2

var timer = false;
var prewidth = $(window).width();//初期幅設定
$(window).on('load resize', function(){//実際は、resizeのみでなく、load 時にもセットが必要
	if (timer !== false) {//timer セット
		clearTimeout(timer);
	}
	timer = setTimeout(function () {
		var nowWidth = $(window).width();//変化後の幅取得
		if (prewidth !== nowWidth) {//初期幅と変化後が同じで無い場合
			location.reload();//リロードする
		}
		prewidth = nowWidth;//初期幅と変化後が同じになった(変化が止まる)
	}, 200);//止まる判定までのミリ秒
});

タイマーをセットすることで、ウィンドウの動作が止まったと判定するため、200ms を設定。これにより、200ms 以内でウィンドウに変化が存在している(動作し続けている間は)リロードが発生しない。

もう少し遅くする方が、画面がガタガタしないというようなら、500ms ぐらいでもアリかも。そこは、使う環境だったり、想定閲覧ユーザに合わせて、調整してください。

この記事が気に入ったらサポートをしてみませんか?