window.onloadの代替案——DOM状態検査


window.onloadは非常によく使われている初期化イベントで、このイベントに対応する応答関数はブラウザでターゲットページのすべてのリソースの内容を全部ロードしてから実行します.ここの「すべてのリソースの内容」は写真、サウンド、iframeが含むページなどを指します.
次の例はwindow.onloadを使ってJavaScriptスクリプトを実行します.
window.onload=function(){  walkmydog()}
Firefox&Operaの下の代替案:
if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", walkmydog, false)
IEにおける代替案:
if (document.all && !window.opera){ //Crude test for IE
//Define a "blank" external JavaScript tag
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete")
      walkmydog()
  }
}
Firefox&Opera&IE総合案:
var alreadyrunflag=0 //flag to indicate whether target function has already been run

if (document.addEventListener)
  document.addEventListener("DOMContentLoaded", function(){alreadyrunflag=1; walkmydog()}, false)
else if (document.all && !window.opera){
  document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>')
  var contentloadtag=document.getElementById("contentloadtag")
  contentloadtag.onreadystatechange=function(){
    if (this.readyState=="complete"){
      alreadyrunflag=1;
      walkmydog()
    }
  }
}

window.onload=function(){
  setTimeout("if (!alreadyrunflag) walkmydog()", 0);
}
なぜwindow.onloadを使うのかというと、DOMContent Loadedもonreadystatechangeもサポートしていないブラウザに対応するためです.setTimeout関数の役割は、変数alreadyrunflagsがwindow.onloadイベントがアクティブになる前に既に割り当てられていることを保証するためである.IEブラウザでは、リソースをほとんどロードしないため、Windows.onloadとonreadystatechangeイベントが同時にアクティブになる場合があります.これでは、Oloadイベントの判断時に変数alreadyrunflagsが付与されていない可能性があります.したがって、setTimeout関数を使用して、onloadイベントにおける判定条件を少し遅らせて、alreadyrunflagsが利用できるようにする.
以下は原文でSafariに使用されるプランです.
if(/Safari/i.test(navigator.userAgent)){ //Test for Safari
  var _timer=setInterval(function(){
  if(/loaded|complete/.test(document.readyState)){
    clearInterval(_timer)
    walkmydog() // call target function
  }}, 10)
}
この方式は単純にdocumentを検出した状態である.なぜDOMContentLoadedを使わないかというと、文章に書かれているSafariバージョンと関係があるのかもしれません.からhttp://en.wikipedia.org/wiki/DOM_eventsによると、Safari 3.1+はDOMContent Loadedをサポートし始めています.嬉しいことに、IE 9もサポートしています.http://p2b.jp/1269996654同時にサポートするのはaddEvent Listenerです.でも、この案はまた役に立つかもしれません.最悪でも視野を広げることができます.
以上の内容のほとんどは以下の通りです.http://www.javascriptkit.com/dhtmltutors/domready.shtml.その中に自分で理解する点を追加しました.