Navegador cruzado Dom Ready

Question

Heredé este fragmento de código y me parece poco óptimo y posiblemente incorrecto ya que está agregando detectores de eventos tanto en la ventana como en los objetos del documento. Sin embargo, está funcionando correctamente a excepción de blackberry 5.0. ¿Alguien puede explicar si todo esto está configurado correctamente o si hay alguna recomendación para mejorarlo y/o agilizarlo?

 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

Si usted quiere saber cómo se hace o ver una manera de hacerlo. Recomiendo mirar el trabajo de Diego Perini. Su trabajo y métodos se utilizan en muchas bibliotecas DOM, incluida jQuery. El tipo no parece obtener mucho crédito por desgracia. Él fue el pionero en el método de sondeo try/catch, que es lo que hace que los eventos cargados en el navegador sean posibles cuando IE se lanza a la mezcla.

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

Answer 2

Personalmente me gustaría usar jQuery para esto.

jQuery está diseñado para manejar la variedad de diferentes implementaciones del navegador con el estado listo para documentos.

Usando jQuery su código se vería así:

$(callback); 

Answer 3

Si desea utilizar javascript puro, puede utilizar thÑ siguiente función multi-navegador (fuente (en ruso): http://javascript.ru/unsorted/top-10-functions)

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) 
} 

Uso:

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