技術はあとからついてくる。

就活開始の半年前にエンジニアに目覚めた人

jQueryの読み込まれる順番について一旦整理する

個人的にJavaScript弱いので強化キャンペーン。 jQuery$(window).load とか $(document).ready とか $(function(){}) とかよく分からなくなったので整理というか実験。

ざっくりおさらい

$(document).ready ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行
$(window).load DOMがロードされ画像などの関連データの読み込みが完了後処理を実行

実験

読み込んだhtmlファイル

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

//headタグ内のscript
<script>
console.log("script_head");

$(window).load(function () {
    console.log("$(window).load_head");
});

$(document).ready(function(){
    console.log("$(document).ready_head");
});

$(function(){
    console.log("$(function()_head");
});
</script>
</head>
<body>
    <div id="content">
        <h1>実験だよ</h1>
    </div>
    
//bodyタグ内のscript
<script>
console.log("script_body");

$(window).load(function () {
    console.log("$(window).load_body");
});

$(document).ready(function(){
    console.log("$(document).ready_body");
});

$(function(){
    console.log("$(function()_body");
});
</script>
</body>
</html>

結果(console)

sample.html:7  script_head
sample.html:34 script_body
sample.html:14 ready_head
sample.html:18 function_head
sample.html:41 ready_body
sample.html:45 function_body
sample.html:10 load_head
sample.html:37 load_body

考察風

  1. まずjQueryを使わなかった場合、どのjQueryの関数よりも早く通常の読み込み順で実行される。
  2. loadは全ファイルの読み込みが終わった後に、上から順で実行。
  3. $(function(){});$(document).ready(function(){}); は書き方が違うが、 動作は、「ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行」するという意味で動作は全く同じなので上から順に実行される。 そのためheadタグ、bodyタグに関係なく、head, head, body, bodyという順番で読み込まれている。