HOWTO · jQuery
jQuery の Window.onload と$(document).ready の比較
このチュートリアルでは、jQuery で Window.onload イベントと$（document）.ready イベントを使用する方法を示します。
このページの内容
onload は、onload イベントが発生したときに必要な機能を実行するために使用されるイベントハンドラーであり、$(document).ready は、DOM ドキュメントオブジェクトモデルがロードされたときに発生します。このチュートリアルでは、jQuery で onload および ready() メソッドを使用する方法を示します。
JavaScript onload イベント
onload 関数は、オブジェクトがそのリソースで完全にロードされたときに機能します。これは主に、すべてのリソースを含め、Web ページが完全にロードされたときに関数を実行する必要がある場合に使用されます。
onload イベントは、Cookie のチェックにも使用されます。また、ユーザーのブラウザからの情報に基づいて正しいバージョンのページが読み込まれたときに、訪問者、バージョン、およびブラウザの種類を確認するために使用することもできます。
onload 機能は本体内で使用されます。このメソッドは組み込みの JavaScript 関数であるため、主に使用されるすべてのブラウザーがこのメソッドをサポートしています。
onload 関数の構文は次のとおりです。
<body onload="Method">
ページが完全に読み込まれたときにアラートメッセージを表示する簡単な例を試してみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
#OnloadDiv {
background-color: #DAA520;
width: 800px;
height: 300px;
margin-left: 120px;
text-align: center;
}
</style>
</head>
<body onload="DemoFunction()">
<div id="OnloadDiv">
<h2>Hello this is demonstration of onload event in jQuery!</h2>
<h3>Once the page is fully loaded, the Demo Function will be loaded</h3>
</div>
<script>
function DemoFunction() {
alert("Hello, This is alert from delftstack.com!");
}
</script>
</body>
</html>
上記のコードは、ページが完全に読み込まれると、アラートイベントを読み込みます。出力を参照してください：
上記のように、onload イベントを使用して Cookie をチェックできます。クッキーをチェックする例を試してみましょう：
<!DOCTYPE html>
<html>
<head>
<style>
#Cookiediv {
background-color: #DAA520;
text-align: center;
width: 600px;
height: 200px;
margin-left: 120px;
}
#Cookie_Status {
font-size: large;
font-weight: bold;
color: White;
}
</style>
</head>
<body onload="checkCookies()">
<div id="Cookiediv">
<h2>See the answer below if the cookies are enabled or disabled?</h2>
<p id="Cookie_Status"></p>
</div>
<script>
function checkCookies() {
var Cookie_text = "";
if (navigator.cookieEnabled == true) {
Cookie_text = "Cookies are Enabled.";
}
else {
Cookie_text = "Cookies are Disabled.";
}
document.getElementById("Cookie_Status").innerHTML = Cookie_text;
}
</script>
</body>
</html>
上記のコードは、ページが完全に読み込まれたときに Cookie が有効になっているかどうかを確認します。
jQuery ready イベント
DOM がロードされると、ready イベントが発生します。このイベントは、ドキュメントの準備が整ったときに発生し、jQuery のメソッドとイベントに便利です。
ready イベントはタグ <body onload=""> では使用されません。jQuery で $(document).ready イベントがどのように機能するかを示す例を試してみましょう。
<html>
<head>
<title>jQuery Ready Method</title>
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#Demo_Div").click(function() {
alert("Hello, This is delftstack.com");
});
});
</script>
</head>
<body>
<div id = "Demo_Div">
Click the div to see the alert.
</div>
</body>
</html>
上記のコードは、ドキュメントの準備ができたらクリックを要求します。ドキュメントをクリックするとアラートが表示されます。
出力を参照してください：
Window.onload イベントと $(document).ready イベントの違い
window.onload と $(document).ready は同じように機能しますが、いくつかの違いがあります。以下に示します。
-
明らかな違いは、
window.onloadが純粋な JavaScript イベントであるということです。そのため、ほとんどのライブラリとブラウザで利用できます。一方、$(document).readyは jQuery イベントであり、jQuery ライブラリでのみ使用可能であることを意味します。 -
もう 1つの主な違いは、
window.onloadが画像やビデオなどのコンテンツの読み込みを待機することです。だから時間がかかるのです。大きなデータがロードされるまで、他のコードは実行されません。一方、
$(document).readyは DOM ベースです。DOM がロードされると、他のコードが実行されます。他のものがロードされるのを待ちません。 -
window.onloadは$(document).readyよりも多くの時間を消費します。
