Js

理解するウィンドウロードイベント



Window Load Event Understand



ページ上の一部のJavaScriptスクリプトタグは、多くの場合、ドキュメントが読み込まれた後にのみ実行できる必要があります。これにより、状況がオブジェクトを取得できない場合があります。同様の状況の発生を回避するために、次の2つの方法を使用できます。

(1)ページ下部のスクリプトコード、実行時のスクリプトコードにより、操作対象のオブジェクトの読み込みが完了していることを確認できます。



(2)。 window.onloadでスクリプトコードを実行します。

栗の場合:



ブラウザの外観:



div#bgの色設定が成功しなかった。これは、スクリプトタグコードがdiv#bgレンダリングの前に実行され、divオブジェクトが見つからなかったため、コンソールがnullを出力したことを示しています。

ロードイベントを使用するようにコードを変更します。

ブラウザは正常に表示されます。

window.onloadイベントハンドラバインディングについて:

window.onloadイベントのデフォルト関数は、最後のバインドのみで実行されます。たとえば、

window.onload = funcA

window.onload = funcB;

次に、ウィンドウがロードされると、funcBの実装のみ

ロードされたウィンドウで複数の機能を実行したい場合は、パッケージ機能を所有できます

Jsファイルを関数に追加できます。 addLoadEvent(test1)addLoadEvent(test2)は、ウィンドウがロードされると、test1、test2を実行します。

ウィンドウの読み込み完了後に複数の関数を実行できる場合に使用するJquery

ウィンドウの読み込みが完了すると、両方の関数が実行されます

window.onloadと$(ドキュメント).ready()を比較します

結局、window.onloadは、ページコンテンツ(画像を含む)が実行されるのを待つ必要があります

$(Document).ready()は、すべてのページDOM構造の描画が完了した後に実行され、関連するDOM要素はコンテンツの読み込みを完了していない可能性がありますが、Webページのすべての要素はDOMContentLoadedと同等のjQueryでアクセスできます。

$(document).load()

HTMLやダウンロードに関連する画像など、関連する要素ファイルがダウンロードされていない可能性があるため、イベントを登録するための$(document).ready()メソッドの使用はダウンロードされていないことに注意してください。読み込みが完了しました。現時点でアクセスしやすい画像であり、そのような属性は有効な幅ではない可能性があります。

したがって、$(document).load()メソッドを使用できます。ウィンドウオブジェクトにバインドする関数が(ウィンドウ、フレーム、オブジェクト、画像など)ロードされたトリガーにある場合、要素にバインドする場合は、トリガー要素のコンテンツが読み込まれた後、Javascriptと同等になります

window.onload = function(){}