Cross Browser Dom Ready

Question

私はこのコードを継承しました。ウィンドウオブジェクトとドキュメントオブジェクトの両方にイベントリスナーを追加しているので、最適でない可能性があります。ただし、ブラックベリー5.0を除いて正常に動作しています。このすべてが正しく設定されているか、それをより良くするための推奨事項があれば、誰かに説明することができますか？

 if (document.readyState === "complete") 
      callback(); 
     else if (document.addEventListener) 
     { 
      document.addEventListener("DOMContentLoaded",callback,false); 
      window.addEventListener("load",callback,false); 
     } 
     else if(window.attachEvent) 
     { 
      document.attachEvent("onreadystatechange", callback); 
      window.attachEvent("onLoad",callback); 
     } else 
      setTimeout(callback,2000); 

Answer 1

。私はDiego Periniの作品を見てみることをお勧めします。彼の仕事とメソッドは、jQueryを含む多くのDOMライブラリで使用されています。その男は、残念ながら多くの信用を得ていないようです。彼はtry/catchポーリングメソッドを開発した人です。これは、IEが混在したときにクロスブラウザDOMロードイベントを可能にするものです。あなたは純粋なJavaScriptを使用したい場合は

https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js

Answer 2

個人的に私は、このためにjQueryを使用すると思います。

jQueryは、ドキュメント準備完了状態のさまざまなブラウザインパメントを処理するように設計されています。

あなたの上記のコードは次のようになりjQueryのを使用して：あなたはどのように行うのを知っているか、それを行う方法を確認したい場合は

$(callback); 

Answer 3

、あなたは（）ロシア語（ソース：http://javascript.ru/unsorted/top-10-functions）をthу以下のクロスブラウザの機能を使用することができます

function bindReady(handler){ 
    var called = false  
    function ready() { 
     if (called) return 
     called = true 
     handler() 
    }  
    if (document.addEventListener) { 
     document.addEventListener("DOMContentLoaded", function(){ 
      ready() 
     }, false) 
    } else if (document.attachEvent) { 
     if (document.documentElement.doScroll && window == window.top) { 
      function tryScroll(){ 
       if (called) return 
       if (!document.body) return 
       try { 
        document.documentElement.doScroll("left") 
        ready() 
       } catch(e) { 
        setTimeout(tryScroll, 0) 
       } 
      } 
      tryScroll() 
     } 
     document.attachEvent("onreadystatechange", function(){  
      if (document.readyState === "complete") { 
       ready() 
      } 
     }) 
    } 
    if (window.addEventListener) 
     window.addEventListener('load', ready, false) 
    else if (window.attachEvent) 
     window.attachEvent('onload', ready) 
    /* else // use this 'else' statement for very old browsers :) 
     window.onload=ready 
    */ 
} 
readyList = []  
function onReady(handler) { 
    if (!readyList.length) { 
     bindReady(function() { 
      for(var i=0; i<readyList.length; i++) { 
       readyList[i]() 
      } 
     }) 
    } 
    readyList.push(handler) 
} 

使用法：

onReady(function() { 
    // ... 
})