DOMContentLoaded

2571 ワード
JavaScript テキストリンク
DOMオブジェクトが完了すると、実行されるイベントを表します.ブラウザがscriptに遭遇すると、DOMオブジェクトの作成が停止し、scriptの実行が完了した後にオーサリングに連絡し直します.
ブラウザがすべてのHTMLを読み取り、DOMツリーを完了するとすぐに発生します.画像ファイルやスタイルシートなどの他のリソースを待たない
DOMContentLoadのスクリプトをブロックしない
上記のルールには2つの例外があります.
  • <img>属性付きスクリプトはブロックされないasyncDOMContentLoadedプロパティ勉強する
  • ・asyncWebページに動的に生成して追加するスクリプトはブロックされませんdocument.createElement('script')
    • 外部スタイルシートはDOMに影響しないため、DOMContentLoaded外部スタイルシートのロードを待たない.
    しかし、例外があります.スクリプトがスタイルシートのタグをロードした後に続く場合、スタイルシートをロードする前にスクリプトは実行されません.
    <link type="text/css" rel="stylesheet" href="style.css">
<script>
  // 이 스크립트는 위 스타일시트가 로드될 때까지 실행되지 않습니다.
  alert(getComputedStyle(document.body).marginTop);
</script>
    この例外は、スクリプトでスタイルの影響を受ける要素のpropertyが使用される可能性があるためです.上記の例では、スクリプトは要素の座標情報を使用します.座標情報は、スタイルをロード、適用した後にのみ決定され、自然に生成されます.DOMContentLoadedスクリプトのロード待ち.上記の場合、もちろんスタイルシートも待ちます.
    繰り返しブレンドと演算子
    n.関数