jQueryの基本 - $(document).ready

  • 310
    いいね
  • 2
    コメント

よく、プラグインの使用方法などで以下のような記述を見ることがあると思います。

$(document).ready(function(){
  //何かしらの処理
});

これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。

jQuery(JavaScript)はHTMLが完全に読み込まれないまま何か処理を実行すると大抵正しく動作しません。なのでこのreadyを使うことになります。

$(function(){
  //なにかしらの処理
});


jQuery(document).ready(function() {
//なにかしらの処理
});

jQuery(function(){
  //なにかしらの処理
});

上記3つの書き方も同じ動作をします。HTMLの読み込みが終わった時点で //なにかしらの処理 が実行されます。

$(document).ready(function(){
  $(".scroll").smoothScroll();
});

$(document).ready(function(){
  $("#slider").slider();
});

$(document).ready(function(){
  $("#nav").nav();
});

ちなみに、このようにreadyを何度も書く必要はなく

$(document).ready(function(){
  $(".smooth").smoothScroll();
  $("#slider").slider();
  $("#nav").nav();
});

//もしくは

$(function(){
  $(".smooth").smoothScroll();
  $("#slider").slider();
  $("#nav").nav();  
});

このようにまとめて書けます。こちらのほうが管理面で圧倒的に良いと思います。

$(window).loadとの違い

$(window).load()はページのすべての要素、つまり画像などがすべてロードされた段階でイベントが発火されます。

それぞれのイベントの順番をまとめるとしたのようになります。

  1. ページの読み込みが始まる
  2. HTMLの読み込みが終わる
  3. $(document).readyが実行
  4. 画像など含めすべてのコンテンツの読み込みが終わる
  5. $(window).loadが実行

$(window).loadは一番最後に実行されます。そのページが、大量のコンテンツを読み込む場合など、なかなか処理が実行されないことがあります。

なので、ユーザの使い勝手を考えたら$(document).ready()を使うほうが良いと思います。

$(window).loadを使うケース

jQueryやJavaScriptの処理によっては、ページが完全に読み込まれなければ処理が正しく実行されないようなものもあります。

画像に何か処理をかけるようなプラグインで、その幅や高さを計測して処理を実行するようなものがあるとします。画像が完全に読み込まれなければ幅や高さがとれないので、\$(document).ready()のタイミングで処理を実行すると誤動作をします。そういったケースには$(window).loadです。

$(document).readyの実態

readyはいったいjQueryの中でどういった処理をしているのか、jQueryのソースコードを斜め読みしてみました。

jquery/jquery

src/core/ready.js

いきなりPromiseとか出てきて面食らいましたが、おそらく以下の記述でイベントをフックしているのだと思います。

ready.js 80行目近辺


// Use the handy event callback
document.addEventListener( "DOMContentLoaded", completed );

// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );

DOMContentLoadedというイベントが発火したタイミングで設定したfunctionを実行するような処理を行っているようです。

ちなみにDOMContentLoadedでイベントハンドラ呼び出しが失敗した場合。windowのloadイベントでもイベントハンドラが呼ばれる多段構成になっているみたいです。安心設計ですね!

DOMContentLoadedとは

Mozillaから説明を引っ張ってきました。

DOMContentLoaded - developer.mozilla.org

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

スタイルシート、画像、サブフレーム(例えばiframeのことでしょうか?)の読み込み完了を除き、初期のHTMLドキュメント読み込みが完全に完了したタイミングで発火されるイベントだそうです。