JavaScriptで画面サイズが変更になった時に発生するresizeイベントの使い方

画像サイズの変更を検知するresizeイベント

JavaScriptでは画面サイズの変更を検知し処理を実行することができます。

画面サイズの変更が行われた時に処理を追加するにはresizeイベントが便利です。

イベント

イベント発生条件
resizeブラウザーのウィンドウサイズが変わった時
ウィンドウに関するイベント

サンプルコード

サンプルコードとして、ウィンドウサイズが変更されるたびに画面サイズの高さと幅を出力するサンプルコードを紹介します。

Output

ウィンドウサイズを変えると、サイズ情報を出力するよ。

Pug
p ウィンドウサイズを変えると、サイズ情報を出力するよ。
	div#targetText
JavaScript
const targetText = document.getElementById('targetText');

window.addEventListener('resize', () => {
	const browserWidth = window.innerWidth;
	const browserHeight = window.innerHeight;
	targetText.textContent = `ブラウザのビューポートの幅は${browserWidth}pxで、高さは${browserHeight}pxです。`;
});

このコードは処理自体は成功しています。しかし1つ問題があります。

1pxの変更ごとにresizeイベントを定義するため、1回の移動につき何回もresizeイベントを呼び出してしまします。これでは負荷が高くなるのでベストプラクティスではありません。

そこで、「resizeイベントが終わってからの1秒間の間に、再度resizeイベントが発生しなかったときだけ処理を実行するサンプルコード」を紹介します。

Output

ウィンドウサイズを変えると、サイズ情報を出力するよ。

Pug
p ウィンドウサイズを変えると、サイズ情報を出力するよ。
	div#targetText1
JavaScript
const targetText1 = document.getElementById('targetText1');
let resizeTimer;

window.addEventListener('resize', () => {
	//2回目以降のリサイズだったらsetTimeout()処理を初期化
	if ( resizeTimer != null ) {
		clearTimeout(resizeTimer);
	}
	//1秒後に処理を実行
	resizeTimer = setTimeout(() => {
		const browserWidth = window.innerWidth;
		const browserHeight = window.innerHeight;
		targetText1.textContent = `ブラウザのビューポートの幅は${browserWidth}pxで、高さは${browserHeight}pxです。`;
	}, 1000 );
});
インストラクター
コメント

コメントを残す