javascript - spec - whatwg español

Cross Browser Dom Ready

Question

Heredé este fragmento de código y parece subóptimo y posiblemente incorrecto, ya que está agregando detectores de eventos tanto en la ventana como en los objetos de documento. Sin embargo, funciona 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 simplificarlo?

        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

Personalmente usaría jQuery para esto.

jQuery está diseñado para manejar la variedad de diferentes implementaciones de navegador del estado de preparación del documento.

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

$(callback);

Answer 2

Si desea usar javascript puro, puede usar la siguiente función de navegador cruzado (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() {
  // ... 
})

Answer 3

Si quieres saber cómo se hace o ver una forma de hacerlo. Recomiendo mirar el trabajo de Diego Perini. Su trabajo y sus métodos se utilizan en muchas bibliotecas DOM, incluyendo jQuery. El chico no parece obtener mucho crédito por desgracia. Él es el que fue pionero en el método de sondeo de prueba / captura, que es lo que hace que los eventos cargados de dominios en varios navegadores sean posibles cuando IE se integra en la mezcla.

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