ホームページ > 記事 > ウェブフロントエンド > JavaScript インスタンス分析ウィンドウのページ読み込みイベント

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

WBOY転載: 2022-08-05 09:24:082592ブラウズ

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

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

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

window.
onload
 = function() {}或者 window.addEventListener(&#39;
load
&#39;, function() {});

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

注:

##window.onload を使用すると、上記の JS コードを記述できます。 onload は、処理関数を実行する前にすべてのページコンテンツがロードされるのを待機するため、page 要素;
window.onload 従来の登録メソッドは 1 回しか記述できません。最後の window.onload が優先されます。
window.addEventListener('load', function() { }) を使用する場合、制限はありません。

document.addEventListener(
&#39;DOMContentLoaded&#39;
, function() { })

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

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

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

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

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

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

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

3f1c4e4b6b16bbbd69b2ee476dc4f83a
      window,addEventListener('resize',function(){
          console.log(window.innerWidth);
      })
     2cacc6d41bbb37262a98f745aa00fbf0

追加:

pageshow イベント

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

例は次のとおりです:

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

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

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

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

le9以降のみ対応;

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

##次にこれ;

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