jQueryの読込み「ready」と「load」と「function」の順番について

2015年01月12日 · jQuery

jQueryの読込み方法は色々とあります。
代表的な定義といえば、以下の書き方になります

$(function(){});
$(document).ready(function(){});
$(window).load(function () {});

こちらはどの順番で動作するでしょうか？

更に「head」前に定義するのと「body」終わりに定義するので順番の違いがあるのかを検証してみたいと思います。

「$(function(){});」と「$(document).ready(function(){});」の呼び方について

$(function(){});
$(document).ready(function(){});

「$(function(){});」と「$(document).ready(function(){});」の書き方が違うのですが、
動作の内容の意味は、「ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行」するという意味で同じです。

「$(function(){});」ですが、
定義方法も人によって違ってきたりします。
例えば

$(function(){});
jQuery(function(){});

違いがあるのかなと感じる方もいる様ですが「jQuery」を省略して「$」と記述しているので動作は同じです！

「ready」と「load」の違いについて

この２つは読込まれるタイミング違ってきております。
どういった動作をしているのか
「ready」は「ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行」でした
「load」は「DOMがロードされ画像などの関連データの読み込みが完了後処理を実行」となります。

順番で書くと

「ready」が先で「load」が後の順番で処理がおこなわれます

処理する順番の再度確認

スクリプトを「head」要素か「body」要素最後に書くとどのような処理の順番になるか

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>スクリプト読込みタイミングについて</title>
	<meta name="robots" content="noindex,nofollow">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<link rel="stylesheet" href="reset.css">
<script>
console.debug("script");
//画像,CSSを読込んだタイミングで動作
$(window).load(function () {
	console.debug("load");
	var img_elm = $("#img");
});

$(document).ready(function(){
	console.debug("ready");
	var img_elm = $("#img");
});

$(function(){
	console.debug("function");
});
</script>
</head>
<body>
	<div id="content">
		<h1>タイトル</h1>
		<div id="nav">
			<ul>
				<li id="text1" class="nav1">テキスト</li>
				<li id="text2" class="nav2">テキスト</li>
			</ul>
		</div>
		<img id="img" src="img/img_1.jpg" width="300">
	</div>
<script>
console.log("script2");
//画像,CSSを読込んだタイミングで動作
$(window).load(function () {
	console.debug("load2");
});

$(document).ready(function(){
	console.debug("ready2");
	var img_elm = $("#img");
});

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

「head」要素と「body」要素最後にそれぞれの処理入れ「console」を使用してデバックする文章を書いてみた

//「head」要素
console.debug("script");
$(window).load(function () {
	console.debug("load");
	var img_elm = $("#img");
});

$(document).ready(function(){
	console.debug("ready");
	var img_elm = $("#img");
});

$(function(){
	console.debug("function");
});
//「body」要素最後
console.log("script2");
$(window).load(function () {
	console.debug("load2");
});

$(document).ready(function(){
	console.debug("ready2");
	var img_elm = $("#img");
});

$(function(){
	console.debug("function2");
});

結果：
script
script2
ready
function
ready2
function2
load
load2

の順番で処理がおこなわれました。
まずは、何もないところ処理が「script」「script2」の処理がおこなわれ
「ready」と「function」、「ready2」と「function2」と処理が続きました。
「head」要素の方が処理が先におこなわれ、その後「body」要素最後の処理が実行されました。
「ready」と「function」ですが、前に書いてある通り処理の意味が一緒なので定義する順番を変更すると処理の順番も変わっていきます

$(document).ready(function(){
	console.debug("ready");
	var img_elm = $("#img");
});

$(function(){
	console.debug("function");
});

を

$(function(){
	console.debug("function");
});

$(document).ready(function(){
	console.debug("ready");
	var img_elm = $("#img");
});

の順番を逆にすると「ready」と「function」から「function」,「ready」へ処理の順番が変更されるということです。
最後に、「load」、「load2」の関数処理がおこなわれました。

処理の順番での注意項目

処理で一番注意しなくてはいけない項目として、
・画像などのhtml要素を変更する場合は

$(window).load(function () {});

を使用すること

画像の幅や高さをスクリプトで制御する場合は、

$(window).load(function () {});

内で処理をおこなうこと、「$(function(){});」と「$(document).ready(function(){});」ではCSSの幅と高さを指定していないと値をとることができません。
制御する場合は、CSSに幅と高さを入れてしまうと、動作がおかしくなる可能性があります。
「load」を使用することで、その問題を解消することができます。

最後に普段何気なく記述をしていますが順番で処理する必要があるものに対して気をつけなくてはならないということです。

引用先

http://blog.cototoco.net/work/201308/window-onload-%E3%81%A8jqurydocument-ready-%E3%81%AE%E9%81%95%E3%81%84/

web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry