UPDATE：2017.6.23
- CATEGORY
コード記述を短くするために
こんにちは！アプリコットデザインのざっきーです！
今回はjavaScriptを使用する際に使いたい記述をまとめていきます
WEBページの動作に合わせた処理
ここでいう動作というのはページの読み込みの完了やスクロール操作をした場合、ウィンドウサイズを変えたときなどが代表的なものでしょうか。
これらの処理は普通に記述すると以下のようになります。
$(function(){
// ロード
$(window).load(function(){
// 処理内容
});
// スクロール
$(window).scroll(function(){
// 処理内容
});
// リサイズ
$(window).resize(function(){
// 処理内容
});
});
// ロード
$(window).load(function(){
// 処理内容
});
// スクロール
$(window).scroll(function(){
// 処理内容
});
// リサイズ
$(window).resize(function(){
// 処理内容
});
});
使用するjava Scriptによっては複数書いてあげる必要もあり、コードが長くなってしまいますよね。
そのような場合はこれらをまとめて記述するためにjQueryの.on()を使ってみましょう。
この.on()は通常は以下のような使い方をするのに使用します。
$(‘button’).on(‘click’, function() {
alert(‘クリックされました’);
});
alert(‘クリックされました’);
});
この場合はボタンをクリックしたら「クリックされました」という警告を表示するのですが、
今回はこれを利用して以下のように記述します。
$(function(){
$(window).on(‘load scroll resize’, function(){
// 処理内容
});
});
$(window).on(‘load scroll resize’, function(){
// 処理内容
});
});
複数行に渡って記述していたコードが1行にまとめられましたね！
ページ読み込み時に発生する処理落ちをたったこれだけの記述で改善できますのでどんどん使っていきましょう！
