JavaScript インスタンス分析ウィンドウのページ読み込みイベント-jsチュートリアル-php.cn

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

WBOY

リリース： 2022-08-05 09:24:08

転載

2597 人が閲覧しました

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

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

[関連する推奨事項: 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 現在の画面の幅。

<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 で登録された読み込みイベントであるため、ボタンをクリックして再生します;