web-dev-qa-db-ja.com

onload（）と$ .readyの違いは？

JQueryの使用でonload()と$(document).ready(function(){..})関数の違いをリストできますか？

javascriptjqueryonload
51
Venkat

ウィンドウおよび/またはbody要素のloadイベント（別名「onload」）は1回発生しますallページのコンテンツがロードされました-これにはすべての画像、スクリプト、など...すべて。

対照的に、jqueryの$(document).ready(...)関数はブラウザー固有のメカニズムを使用して、HTML/XML domがロードされてアクセス可能になった後、できるだけ早くハンドラーが呼び出されるようにします。これは、ページのhtml dom内の要素にアクセスすることを意図したスクリプトを安全に実行できるページ読み込みプロセスの最初の時点です。このポイントは、最終的なloadイベントよりも早く（多くの場合ずっと早く）到着します。これは、2次リソース（イメージなど）をロードするために追加の時間が必要になるためです。

71
Lee

2つの主な違いは次のとおりです。

  1. Body.Onload（）イベントは、DOMおよび画像などの関連リソースが読み込まれた後にのみ呼び出されますが、jQueryのdocument.ready（）イベントは、DOMが読み込まれると呼び出されます。つまり、画像などのリソースが読み込まれるのを待ちません。したがって、リソースを待たずにHTML構造がロードされると、jQueryのreadyイベントの関数が実行されます。
  2. 1ページに複数のdocument.ready（）を含めることができますが、Body.Onload（）イベントはできません。
19
Bhanu Prakash Pandey

Document.ready（）関数は、HTML DOMがロードされるとすぐにトリガーします。しかし、onload（）関数は、HTML DOM、画像などのすべてのボディコンテンツが読み込まれた後にトリガーされます。

2
user5755278

body.onload（）はHTML構造と関連リソースの両方を処理しますが、document.ready（）はHTML構造のみを処理します。

1
sridiva

onload（）は、ターゲット要素のすべてのコンテンツ（すべて）がCSS、画像などのように完全にロードされると起動します。

$。readyは、ターゲット要素のコンテンツが読み込まれ、スクリプトで操作する準備ができたら、その中のコードを実行する必要があることを示します。 jQueryスクリプトを実行するために画像がロードされるのを待ちません。

.

Ex（ボディオンロード）：

<body onload="loadBody()">

<script>
function myFunction() {
    alert("Page is loaded");
}
</script>
</body

Ex（要素へのロード）：

<img src="w3html.gif" onload="loadImg()" width="100" height="132">

<script>
function loadImg() {
    alert("Image is loaded");
}
</script>

Ex3（$ .ready）：

<script type = "text/javascript">
        $(document).ready(function() {
            alert("$(document).ready fired");
        });
    </script>
0
Srikrushna

OnloadはDOMとリソースに注意します。画像がロードされているか、スクリプトを実行する準備ができているかなどをチェックします。

$ .readyは、ページの完全なDOMを読んだかどうかを確認するだけです。

詳細と例については、このリンクをご覧ください： http://dailygit.com/difference-between-document-ready-and-window-load-in-jquery/

0
Daniele Petrarolo