javascript(jQuery)読み込みの仕組みを解説！

今回は javascript / jQuery の読み込まれる仕組みを解説します。

window.onload / ready / $(function(){})　など 色々なイベント処理があります。みなさんはフロントエンドの基本であるこれらをきちんと理解しているでしょうか。これらの理解があるかどうかで今後の開発の質が大きく変わってくることかと思います。

例えば、ある要素に対して押下イベントを登録するにしてもDOMツリーが構築されてから登録処理を実施しないとイベント登録はされません。なぜなら登録先の要素が無いために登録処理が空振りに終わってしまうからです。

ではDOMツリーが構築されるタイミングはいつなのか、適切なタイミングで登録するにはどうしたらいいのか。このあたりの理解があやふやな方は是非読んでいってください。

よく使う$(function(){...とは何なのか

jQueryを使うときには、次の式を書きますね。

$(function(){
  //処理...
});

これは次の式の略です。

jQuery(document).ready(function() {
  //処理...
});

この式は他にもこのような記載方法があります。機能はどれも同じです。

$(document).ready(function(){
  //処理...
});

jQuery(function(){
  //処理...
});

これらの式はHTMLがDOMツリーを構築完了した直後に呼ばれる式です。ですので要素に対してのイベント登録は上記の式の中に書けば登録することが出来ます。しかし、CSSレンダリングや画像の読み込みなどはまだ行われていないので、要素や画像の高さを取得することは出来ません。

全体の順番

全体としての順番は次の通りです。

１．Webページの読み込み開始
　　基本的には上から順番にWebページが読み込まれていきます。

　↓

２．HTMLを読み込んでDOMツリーの構築
　　ここでDOMツリーの構築が完了すると次の式たちが実行されます。

$(document).ready(function(){
  //処理...
});

$(function(){
  //処理...
});

　↓

３．CSS、画像、サブフレーム（iframeとか）の読み込み
　　ここで各種コンテンツの読み込みが完了すると次の式が実行されます。

window.onload = function(){
  //処理...
}

こうやって書いても良いです。

$(window).load(function(){
  //処理...
});

　　ここだとCSSレンダリング後なので、要素のheight,widthが取得できます。
　　もちろん画像のheight,widthも取得できます。

ちなみにTips

window.onloadは一度しか呼ばれません。二つ以上書くと最後に書いたもののみ実行されます。

window.onload = function() {
  //処理１...
}

window.onload = function() {
  //処理２...
}

これは、上記のように window.onloadに代入されるので最後に書いたものに上書きされるためです。

すべてのコンテンツの読み込みが完了した時点で処理を複数実施したい場合は次のように書きます。

$(window).on('load', function() {
  //処理１...
});

$(window).on('load', function() {
  //処理２...
});

これをjQueryなしでやるには次のように書きます。

function onload_function1(){
  //処理１...
}

function onload_function2(){
  //処理２...
}

window.addEventListener('load', onload_function1);
window.addEventListener('load', onload_function2);

window.onloadと違い次の式は何回でも記載することが出来るので安心して使いましょう。

$(function(){
  //処理...
});

この式をjQueryを使用せずにjavascriptのみで呼び出すのは次のように書きます。

document.addEventListener( "DOMContentLoaded", completed );

この書き方の対応ブラウザは次通りです。

Chrome	Firefox	InternetExplorer	Safari
1.0～	1.0～	9.0～	3.1～

また、途中で記載した次の式は、jQueryの関数.loadを使用した呼び出し方です。

$(window).load(function() {

これはwindow以外の要素でも使用することが出来ます。指定した要素の読み込み完了した時点で発火するイベントの登録ということですね。

<img src="test.gif" alt="test" id="test">

$( "#test" ).load(function() {
  //処理...
});

これをjavascriptのみで実行するには次のように書きます。

window.addEventListener("load", completed );

いかがでしたでしょうか。
以上、今回は javascript / jQuery の読み込まれる仕組みを解説でした。

改訂新版 jQuery本格入門