web-dev-qa-db-ja.com

「window.onload」を使用する場合

JavaScriptで、ページが読み込まれたときにスクリプトを1回実行する場合、window.onloadまたはスクリプトを書くだけですか？

たとえば、ポップアップが必要な場合は、（<script>タグ）：

alert("hello!");

または：

window.onload = function() {
    alert("hello!");
}

どちらもページが読み込まれた直後に実行されるようです。違いは何ですか？

javascriptonloadonload-event
28
Jonathan Lam

window.onloadは、ブラウザがそれに到達したときに実行されます。

window.addEventListenerは、ウィンドウがロードされるのを待ってから実行します。

一般に、2番目を実行する必要がありますが、関数を定義する代わりに、イベントリスナーをアタッチする必要があります。例えば：

window.addEventListener('load', 
  function() { 
    alert('hello!');
  }, false);
32
Crayon Violent

他の答えはすべて時代遅れのようです

まず、スクリプトを先頭に配置し、_window.onload_を使用することはアンチパターンです。それはIEの日からせいぜいJavaScriptの誤解と最悪のブラウザへの残り。

スクリプトをHTMLの一番下に移動するだけです

_<html>
  <head>
   <title>My Page</title>
  </head> 
  <body>
    content
  </body>
  <script src="some-external.js"></script>
  <script>
    some in page code
  </script>
</html>
_

人々が_window.onload_を使用した唯一の理由は、スクリプトがheadセクションに入る必要があると誤って信じていたためです。スクリプトがheadセクションにある場合、順番に実行されるため、execute in orderの定義により、本文とコンテンツはまだ存在していません。

ハッキングの回避策は、_window.onload_を使用して、ページの残りがロードされるのを待つことでした。スクリプトを一番下に移動することでその問題も解決し、ボディとコンテンツが既にロードされているため、_window.onload_を使用する必要がなくなりました。

より現代的な解決策は、スクリプトでdeferタグを使用することですが、スクリプトをすべて外部にする必要があることを使用することです。

_<head>
  <script src="some-external.js" defer></script>
  <script src="some-other-external.js" defer></script>
</head>
_

これには、ブラウザがスクリプトのダウンロードをすぐに開始し、指定された順序でスクリプトを実行するという利点がありますが、ページがロードされるまで、_window.onload_を必要とせずに実行しますが_window.addEventListener('load', ..._

17
gman

MDNのドキュメント です。

それによると：

ロードイベントは、ドキュメントのロードプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトがDOMにあり、すべての画像とサブフレームの読み込みが完了しています。

ブラウザーがHTMLでこのスポットに到達するとすぐに、最初のコードスニペットが実行されます。

2番目のスニペットは、DOMとすべての画像が完全に読み込まれたときにポップアップをトリガーします（仕様を参照）。

alert()関数を考慮すると、どの時点で実行されるかは重要ではありません（windowオブジェクト以外に依存しません）。ただし、 [〜＃〜] dom [〜＃〜] を操作する場合は、適切にロードされるまで必ず待つ必要があります。

5
Slava Fomin II

これは、スクリプト要素が検出されたときに実行するか、loadイベントが発生したときに実行するか（ドキュメント（イメージなどを含む）がロードされた後）に依存します。

どちらも常に正しいとは限りません。

ただし、一般的に、 onload （古いブラウザをサポートする必要がある場合は互換性ライブラリを使用）を使用して、関数をaddEventListenerに直接割り当てることは避けます。

1
Quentin

DOMがロードされるのを待つ理由は、スクリプトの後にロードする要素をターゲットにできるようにするためです。 alertを作成しているだけなら、それは問題ではありません。ただし、スクリプトの後のマークアップにあるdivをターゲットにしている場合、DOMツリーのその部分がロードされるまで待たないとエラーが発生します。

document.readyはwindow.onload jQueryを使用している場合。

こちらをご覧ください： window.onload vs $（document）.ready（）

1
SeeMeCode

次の3つの選択肢があります。

  1. スクリプトタグ内で直接、解析されるとすぐに実行されます。

  2. DOMの準備ができたら、document.addEventListener( "DOMContentLoaded", function(){});内で実行します。

  3. Inside window.onload function(){})は、すべてのページリソースがロードされるとすぐに実行されます。

0
Henrik