違い、onloadイベント＆$（ドキュメント）.ready（）

Question

私はpageLoadとの違いは何かをより詳細に知る必要があります

、onloadイベント& $（ドキュメント）.ready（）

私は答えを見つけたが、それは私には分かりません。 答えは

のようなものであるHTML文書がロードされた後、すべてのコンテンツ（例えば、画像）もロードされたときのonloadイベントは、後で発生しながら、readyイベントは、発生します。

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

HTML文書がロードされた後、準備完了イベントが発生しようとしている人が発生します。画像などのすべてのページ要素がロードされた後にonloadイベントが発生します。

HTMLドキュメントの読み込みは何ですか？私は、HTML文書のロードがすべてのページ要素のロード完了を意味することを知っています。

DOMの準備が整っているとはどういう意味ですか？どのようなHTMLドキュメントの負荷& DOM負荷の違いは何ですか？ 私は例で理解してください。 ありがとう

Answer 1

私はpageLoadの意味を知りませんが、onloadと$(document).ready()の情報があります。

window.onloadは、ページ内のすべての読み込みが完了したときに起動します。これは、DOM全体がロードされるだけでなく、イメージなどのリンクされたリソースがすべてロードされることを意味します。これでイメージのロードが完了するまで待つので、window.onloadを起動するまでに時間がかかることがあります。あなたは本当に

$(document).ready()はjQueryの固有のものです...イメージが、ロードを完了するまで、あなたは一般的にページを修正したり、イベントハンドラなどをフックし、あなたのjavascriptの実行を開始するために、この長いを待ちたくない待つ必要がない限り、 DOMは操作の準備ができたらすぐに起動しますが、イメージの読み込みが完了するまでに時間がかかる可能性があります。これは、ページHTMLに存在するすべてのオブジェクトがブラウザによって解析され、初期化され、ページ内のすべてのスクリプトがロードされた後に発生します。このイベントの瞬間、すべてのブラウザでDOMを変更することは安全です。これは、DOMが安全にロードされたときを検出するためのメカニズムが古いブラウザーと新しいブラウザーで異なるため、一部のブラウザーでは少し前または後で発生することがあります。

$(document).ready()のjQuery 1.6.x実装では、DOMの準備が整ったときにさまざまな検出メカニズムが使用されます。好ましい方法は、DOMContentLoadedイベントがドキュメントオブジェクトに対してトリガするときです。ただし、このイベントは一部のブラウザでのみサポートされているため、他のブラウザの代替メカニズムがあります。

これらの両方のイベントは、ページごとに1回だけ発生します。

Answer 2

のレシピをシェフにWebページをロードするプロセスを比較するためのアナロジーを描きましょう：

まず、シェフ（ブラウザ）がそれを確認するために、全体のレシピ（HTMLドキュメントをダウンロードする）を読み取り彼はステップ（HTMLコード）を理解し、キッチン（ブラウザのキャッシュ）にどのような食材（イメージ）、道具（スタイルシート）、およびアプライアンス（外部スクリプト）が必要かを知っています。

シェフが読書を続けている間、彼は食器、食器、器具（サーバーから他のファイルをダウンロードする）を得るためにパントリーに助手を送ります。彼はレシピの読んだら（$(document).ready()）、ステップを踏んで（ページを表示する）、彼はアシスタントがそのステップを完了するために必要な資料を返す前にステップすることがあります。彼はかなり熟練しているので、彼は待っている間も後のステップを完了することができます。 （ここでの類推はちょっと分かりませんが、基本的にブラウザはHTMLに基づいてページをレイアウトします;ページロードを見てからフォントやレイアウトが変更されると数秒後に変更されますスタイルシートを手に入れました...このオーブンに入っているケーキに卵を追加することができると想像してください）

シェフのアシスタントがレシピに記載されているすべてをキッチンに戻してからシェフが完成した食事をプレートに置いてそれを焼き付けることができる（コンテンツコードがonloadのイベントコードを実行する）ことができます。 readyイベントはjQueryのに固有である一方、

---

onloadイベントは、DOMにおける標準イベントです。

DOMは、通常のJavaScriptの基本コンポーネントであるドキュメントオブジェクトモデルです。これは、すべての現代のWebブラウザがすでに何を意味するのかを知っていることを意味します。onload

jQueryは広く使用されているJavaScriptライブラリです。スクリプトが$(document).ready()を正しく使用するためには、jQueryライブラリのコピーにリンクする必要があります。ブラウザーは、$(document).ready()がjQueryなしで何を意味するのかを知らない。