$(window).load()関数と$(document).ready()関数の違い


216

違いは何である$(window).load(function() {})$(document).ready(function() {})jQueryのでは?

回答:


266
  • document.readyjQueryイベントであり、DOMの準備ができたときに実行されます。たとえば、すべての要素が検出/使用されますが、必ずしもすべてのコンテンツではありません。
  • window.onload画像などが読み込まれると、後で(または最悪の場合は同時に)起動するため、たとえば画像の寸法を使用している場合は、代わりにこれを使用することがよくあります。

38
の省略形で$(document).ready(function(){})あり$(function(){})、window.loadとのもう1つの重要な違いは、最初のDOMreadyの後であっても、関数の今後のすべての呼び出しで実行されることです。
マイケルバトラー14

2
@dblissはい、onloadはの省略形だと思います$(window).on('load')。どちらもloadイベントを参照しています
無料ランサー

5
@MichaelButler-どういう意味it will run on ALL future calls of the functionですか?
BornToCode、2016年

7
@MichaelButler:コメントをもっと明確にする必要があります。1)$(document).readyDOMの準備ができた後、USERがさらにコードを実行することについて話している。これは非常に小さなユースケースであるため、言及することで全員を混乱させることはおそらくありませんでした。2)ENVIRONMENT $(document).ready(f‌​unction(){})は、DOMの準備ができたときに一度だけ呼び出します。ユーザーが何らかの理由で$(document).readyDOMの準備ができた後にさらに実行すると、はい、すぐに実行されます。
Doug S

4
違います、マイケル。このままにしておき、役に立たないコメントに分解しないようにしましょう。少なくとも混乱した人々は今や答えを持っています。
Doug S

73
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

22

$(window).load()jQueryの3.0で使用できません

$( window ).load(function() {
        // Handler for .load() called.
});

それを回避するには、「イベントハンドラーアタッチメント」として使用できます。

$( window ).on("load", function() {
        // Handler for .load() called.
});

14

違いは次のとおりです。

$(document).ready(function() { DOMが読み込まれたときに発生するjQueryイベントなので、ドキュメント構造の準備ができると発生します。

$(window).load() コンテンツ全体が読み込まれた後にイベントが発生します。


9
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

すべてのiframeコンテンツが読み込まれた後にwindow.loadがトリガーされます


7

$(document).ready すべての要素がDOMに存在するが、必ずしもすべてのコンテンツが存在するとは限りません。

$(document).ready(function() {
    alert("document is ready");
});

window.onloadまたは$(window).load()、すべてのコンテンツリソース(画像など)が読み込まれた後に発生します。

$(window).load(function() {
    alert("window is loaded");
});


0

document.ready(jQuery) document.readyは、HTMLドキュメントが読み込まれた直後に実行され、DOMの準備が整います。

DOM:Document Object Model(DOM)は、HTML、XHTML、およびXML文書内のオブジェクトを表現および操作するための、クロスプラットフォームで言語に依存しない規則です。

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load(組み込みJavaScript) ただし、window.loadは、ページが完全に読み込まれるまで待機します。これには、内部フレームや画像などが含まれます。* window.loadは、組み込みのJavaScriptメソッドです。古いブラウザー(IE6、IE8、古いFF、Operaバージョン)の癖ですが、通常はすべてのブラウザーで動作します。

window.loadは、次のように本文のonloadイベントで使用できます(ただし、後で混乱を招く可能性があるため、HTMLでこのようなコードを混在させないことを強くお勧めします)。

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

0

$(window).loadは、DOMとページ上のすべてのコンテンツ(すべて)がCSS、画像、フレームのように完全に読み込まれたときに発生するイベントです。最良の例の1つは、実際の画像サイズを取得する場合、または使用するすべての詳細を取得する場合です。

$(document).ready()は、DOMが読み込まれ、スクリプトで操作できるようになったら、コードを実行する必要があることを示しています。jQueryスクリプトを実行するために画像が読み込まれるのを待ちません。

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$(window).loadが$(document).ready()の後に起動されました

$(window).loadは1.8で廃止され、jquery 3.0で削除されました


0

$(window).loadイベントはJQuery 3.xでサポートされていないと思います


1
あたりとしてドキュメント $(ウィンドウ).LOADイベントは、jQueryの3.0で削除されました
マチューVIALES

1
これは正しいです。これを回避するために、「イベントハンドラーアタッチメント」として使用できます。
キーンアマラル

0

DOM Level 2 Eventsによれば、loadイベントはではdocumentなくで発生するはずwindowです。ただし、下位互換性のためにすべてのブラウザにload実装さwindowれています。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.