1332

window.onloadJavaScriptと jQuery の$(document).ready()メソッドの違いは何ですか?

4

17 に答える 17

1319

このreadyイベントは、HTML ドキュメントが読み込まれた後にonload発生しますが、イベントは後ですべてのコンテンツ (画像など) も読み込まれたときに発生します。

onloadイベントは DOM の標準イベントですが、イベントreadyは jQuery に固有です。このイベントの目的はready、ページ内の要素に機能を追加するコードがすべてのコンテンツが読み込まれるのを待つ必要がないように、ドキュメントが読み込まれた後できるだけ早く発生することです。

于 2010-09-13T06:28:21.707 に答える
149

window.onloadは組み込みの JavaScript イベントですが、その実装にはブラウザー (Firefox、Internet Explorer 6、Internet Explorer 8、Opera ) ごとに微妙な違いがあったため、jQuery はそれらを抽象化し、ページの DOM の準備が整うとすぐに起動する を提供します。 （画像などを待ちません）。document.ready

$(document).ready(定義されていない ではないことに注意してくださいdocument.ready) は jQuery 関数であり、次のイベントをラップして一貫性を提供します。

  • document.ondomcontentready/ document.ondomcontentloaded- ドキュメントの DOM が読み込まれたときに発火する新しいイベント (画像などが読み込まれるまでに時間がかかる場合があります)。繰り返しますが、Internet Explorer とその他の国では若干異なります。
  • （古いブラウザでwindow.onloadも実装されています）、ページ全体（画像、スタイルなど）がロードされたときに起動します.
于 2010-09-13T06:30:04.880 に答える
46

Windows ロードイベントは、ページ上のすべてのコンテンツ (DOM (ドキュメント オブジェクト モデル) コンテンツと非同期 JavaScript、フレーム、およびイメージを含む) が完全に読み込まれると発生します。body onload= を使用することもできます。どちらも同じです。window.onload = function(){}と<body onload="func();">は、同じイベントを使用するさまざまな方法です。

jQuery$document.ready関数イベントは、DOM (ドキュメント オブジェクト モデル) がページに読み込まれるよりも少し早く実行され、window.onload呼び出されます。画像やフレームが完全に読み込まれるまで待機しません。

次の記事から引用: how $document.ready()is different fromwindow.onload()

于 2013-09-17T07:09:09.840 に答える
25 

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

于 2014-02-26T12:30:16.760 に答える
22

$(document).ready()Internet Explorerで使用する場合の注意事項。ドキュメント全体が読み込まれる前にHTTP 要求が中断された場合(たとえば、ページがブラウザーにストリーミングされている間に別のリンクがクリックされた場合)、IE は$(document).readyイベントをトリガーします。

イベント内のコードが$(document).ready()DOM オブジェクトを参照している場合、それらのオブジェクトが見つからない可能性があり、Javascript エラーが発生する可能性があります。これらのオブジェクトへの参照を保護するか、それらのオブジェクトを参照するコードを window.load イベントまで延期します。

他のブラウザ (特に Chrome と Firefox) ではこの問題を再現できませんでした。

于 2012-08-27T18:56:57.047 に答える
18

イベント

$(document).on('ready', handler)jQuery からの ready イベントにバインドします。ハンドラーは、DOM がロードされるときに呼び出されます。画像などのアセットがまだ見つからない可能性があります。製本時にドキュメントの準備ができている場合は呼び出されません。jQuery はそのためにDOMContentLoaded -Event を使用し、利用できない場合はエミュレートします。

$(document).on('load', handler)すべてのリソースがサーバーからロードされると発生するイベントです。画像が読み込まれます。onloadは生の HTML イベントですが、readyはjQuery によって構築されます。

機能

$(document).ready(handler)実際には約束です。呼び出し時にドキュメントの準備ができている場合、ハンドラーはすぐに呼び出されます。readyそれ以外の場合は、 -Eventにバインドされます。

jQuery 1.8 より前は$(document).load(handler)、 のエイリアスとして存在していました$(document).on('load',handler)。

参考文献

于 2013-11-29T15:06:48.167 に答える
12

覚えておかなければならないことの 1 つ (というか、思い出す必要があります) は、onloadのように s をスタックできないことですready。つまり、jQuery マジックreadyでは同じページで複数の を使用できますが、onload.

最後のonloadは、それ以前onloadの を無効にします。

これに対処する良い方法は、明らかに Simon Willison によって書かれ、Using Multiple JavaScript Onload Functionsで説明されている関数を使用することです。

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});
于 2013-11-07T20:54:48.923 に答える
12

Document.ready(jQuery イベント) は、すべての要素が配置され、JavaScript コードで参照できる場合に発生しますが、コンテンツが読み込まれるとは限りません。Document.readyHTML ドキュメントがロードされたときに実行されます。

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

ただし、window.loadページが完全に読み込まれるまで待機します。これには、内部フレーム、画像などが含まれます。

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});
于 2015-03-03T06:52:45.140 に答える
10

document.ready イベントは、HTML ドキュメントがロードされたときに発生し、window.onloadイベントはすべてのコンテンツ (画像など) がロードされた後で常に発生します。

document.readyイメージの読み込みを待たずに、レンダリング プロセスの「早い段階」に介入したい場合は、このイベントを使用できます。スクリプトが「何かを実行する」前に画像 (またはその他の「コンテンツ」) の準備が必要な場合は、 まで待つ必要がありますwindow.onload。

たとえば、「スライド ショー」パターンを実装していて、画像サイズに基づいて計算を実行する必要がある場合は、 まで待つことをお勧めしますwindow.onload。そうしないと、画像が読み込まれる速度によっては、ランダムな問題が発生する可能性があります。スクリプトは、画像をロードするスレッドと同時に実行されます。スクリプトが十分に長い場合、またはサーバーが十分に高速である場合、イメージがたまたま時間内に到着しても、問題に気付かないことがあります。ただし、最も安全な方法は、画像の読み込みを許可することです。

document.readyユーザーに「読み込み中...」のサインを表示するのは良いイベントかもしれません。window.onloadその後、リソースの読み込みが必要なスクリプトをすべて完了し、最後に「読み込み中...」のサインを削除できます。

例:-

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

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

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;
于 2016-05-16T10:37:07.307 に答える