JavaScript インスタンス分析ウィンドウのページ読み込みイベント

この記事では、javascript に関する関連知識を提供します。主にウィンドウ window イベントを紹介します。window.onload は、ドキュメント コンテンツが完全に読み込まれるときに発生するウィンドウ (ページ) 読み込みイベントです。このイベントは、皆さんの参考になれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

ウィンドウページ読み込みイベント

window.
onload
 = function() {}或者 window.addEventListener('
load
', function() {});

window.onload は、ウィンドウ (ページ) 読み込みイベントです。このイベントは、 ドキュメント コンテンツ (画像、スクリプト ファイル、 CSS ファイルなど）。

注:

• ##window.onload を使用すると、上記の JS コードを記述できます。 onload は、処理関数を実行する前にすべてのページ コンテンツがロードされるのを待機するため、page 要素;

• window.onload 従来の登録メソッドは 1 回しか記述できません。最後の window.onload が優先されます。

• window.addEventListener('load', function() { }) を使用する場合、制限はありません。

document.addEventListener(
'DOMContentLoaded'
, function() { })

DOMContentLoaded イベントがトリガーされるときは、

DOM が読み込まれるときのみ、スタイル シート、画像、フラッシュは含まれません。等

ページ上に多くの画像がある場合、ユーザーのアクセスから onload のトリガーまでに時間がかかり、インタラクティブな効果が実現できず、ユーザー エクスペリエンスに影響を与えることは避けられません。 #DOMContentLoaded

の方が適切です。 ウィンドウ サイズを調整するイベント

window.onresize = funtion(){}
window.addEventListener("resize",funtion(){});

window.onresize は、ウィンドウ サイズを調整するための読み込みイベントです。

ウィンドウ サイズが変更されるたびにトリガーされ、呼び出されます。ピクセル 処理関数。このイベントは、レスポンシブ レイアウトを完成させるためによく使用されます。 window.innerWidth 現在の画面の幅。

<script>
      window,addEventListener(&#39;resize&#39;,function(){
          console.log(window.innerWidth);
      })
     </script>

追加:

pageshow イベント

、このイベント は、ページがキャッシュから取得されたかどうかに関係なく、ページが表示されるときにトリガーされます。リロードされたページでは、load イベントがトリガーされた後に Pageshow がトリガーされます。イベント オブジェクトに保持されているキャッシュ内のページによって Pageshow イベントがトリガーされるかどうかを決定します。

例は次のとおりです:

window.onload は、ウィンドウ (ページ) の読み込みイベントです。このイベントは、ドキュメントのコンテンツが読み込まれるときにトリガーされます。 (画像、スクリプト ファイル、CSS ファイルなどを含む) が完全に読み込まれると、処理関数が呼び出されます。window.onload を使用すると、onload はすべての要素が読み込まれるまで待機するため、ページ要素の上に JS コードを記述することができます。ページのコンテンツがロードされ、処理関数を実行するには;

従来の window.onload の登録イベント メソッドは 1 回しか記述できません。複数ある場合は、最後の window.onload が優先されます;

addEventListener を使用する場合、制限はありません;

DOMContentLoaded イベントがトリガーされるときは、スタイル シート、ピクチャ、フラッシュなどを除き、DOM が読み込まれるときのみです;

le9以降のみ対応;

#ページの画像が多い場合、ユーザーアクセスからonloadトリガーまでに時間がかかる場合があります DOMContentlのloadedイベントを利用可能;

##次にこれ;

コードは addEventListener で登録された読み込みイベントであるため、ボタンをクリックして再生します;

HTML の DOM querySelector() メソッドは、jQuery などの追加サポートを必要とせず、DOM 要素も簡単に取得できます。構文は jQuery に似ており、

querySelector() メソッドは戻り値のみを返します。指定されたセレクターの最初の要素と一致します;

これを見るのは初めてですが、正しいようです;

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、 ウェブフロントエンド

]

以上がJavaScript インスタンス分析ウィンドウのページ読み込みイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。