2011-08-01 30 views
20

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?Navegador cruzado Dom Ready

 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); 
+2

Coloque todos los JS al final del documento. Es más o menos lo mismo. – Saxoier

+1

no, no es así si tiene scripts de carga asíncrona. – VinnyD

+0

Si usa async. scripts de lo que no debería usar 'DOMContentLoaded' o la forma en que lo propuse debido a la ejecución de esta asincronización. La secuencia de comandos puede aparecer después de que se dispare este evento o el analizador de HTML llegue al final del archivo html. Por lo tanto, solo se pueden usar 'window.onload' y' xhr.onreadystatechange'; ambos son compatibles con el navegador cruzado. – Saxoier

Respuesta

62

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

+11

+1 porque es su trabajo el que utilizó jQuery y merece algo de crédito. –

+0

Muy bonito, merece un +1. –

+0

Esto funcionó bien, a diferencia de otros fragmentos más pequeños que probé antes. Parece ser código maduro +1. – Rolf

3

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); 
5

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() { 
    // ... 
}) 
+0

bastante seguro de que esto no funciona en blackberry 5. ¡pero gracias de todos modos! – VinnyD

Cuestiones relacionadas