WEBサイトの製作、管理、とかの日記ブログです。

<<   2018年09月   >>
SunMonTueWedThuFriSat
      1
2345678
9101112131415
16171819202122
23242526272829
30      
新着記事
カテゴリ
過去ログ
コメント
検索
HTML5にDOMContentLoadedなんてのがあったんだね
HTML5にDOMContentLoadedなんてのがあったんだね。
ノーマークだったが、Firefox 1.0から実装されてるみたい。

window.onload に似たような感じで、
document.addEventListener('DOMContentLoaded',function)
でdocumentに登録する。

loadだとたまに実行が遅れちゃう場合があるが、
画像や非同期のものも含めてJavaScript実行中だと遅れちゃうぽい?
DOMContentLoadedだとHTMLを読み込んでDOMが構築されたら実行される。

asyncやdeferで読み込まれるscriptの場合は既にloadedの可能性があるので、
if(document.readyState=='loading'){
  document.addEventListener('DOMContentLoaded',$function,false);
}else{
  $function();
}
みたいな感じでdocument.readyStateがloading以外の場合は即実行する必要がある。

document.readyStateは、ブラウザによっては違う場合もあるみたいだが、
HTMLの仕様だと"loading","interactive","complete"の3つがあり、
onloadの場合はcomplete直前に実行される。
DOMContentLoadedの場合はinteractiveの直前に実行される。
loadingはHTMLの読み込み中で、
interactiveはHTMLは完了してるが画像等の外部ファイル読み込み中。

今朝作ってたサイトでasyncのscriptがasyncのAdSenseにブロックされてる感じだったんで調べて知ったんだが、
こんな便利なものがあったんだね。

この記事へのコメント
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7