【jQuery】様々な動作「.load」「.scroll」「.resize」を行ったときの処理をまとめて書く方法。

ウェブサイトを閲覧しているとき、jQuery側で様々な動作を感知・取得して、その動作に合わせた処理を行うことが多々あります。

例えば、「ページの読み込みが完了したとき」なら.load を使い、「スクロール操作したとき」なら.scrollを、「ウィンドウのサイズを変えたとき」なら.resizeを使います。

• $(window).load …　ページの読み込みが完了したとき
• $(window).scroll …　スクロール操作したとき
• $(window).resize …　ウィンドウサイズ変えたとき

今日は、これらの処理をまとめて書く方法を紹介します。

まず、それぞれ別に書くなら以下のようになりますね。

$(function(){
	// ロード
	$(window).load(function(){
		// 処理内容
	});
	// スクロール
	$(window).scroll(function(){
		// 処理内容
	});
	// リサイズ
	$(window).resize(function(){
		// 処理内容
	});
});

これを１つにまとめるワケですが、jQueryメソッドの.onを使って簡単に書くことができます。

$(function(){
	 $(window).on('load scroll resize', function(){
		// 処理内容
	});
});

下位ヴァージョンの「jQuery 1.7」までは .on ではなく .bind も使えたようですが、現在こちらは非推奨になっているようです。