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

Ads by Google

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

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

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

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


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

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

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

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

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google