domcontentloaded - javascript: cómo escribir $(documento). listo como evento sin jquery

domcontentloaded vs load

Question

en jquery $ (documento) .ready (función) o $ (función), ¿cómo podría hacer lo mismo sin jquery, y necesito navegador compatiable, y permitir adjuntar más de una función.

Nota: dom ready! = Ventana cargada

Answer 1

Editar

El evento DomReady no existe nativamente en javascript. Puede implementar el suyo siguiendo un trabajo maravilloso realizado por personas como Dean Edwards here y here con los que están en su lugar puede realizar un proceso similar de archivo adjunto en el documento en lugar de ventana.

Verifique la respuesta de user83421 a Cómo agrego un evento window.onload adicional en Javascript

Para recapitular aquí también.

if (window.addEventListener) // W3C standard
{
window.addEventListener(''load'', myFunction, false); // NB **not** ''onload''
}
else if (window.attachEvent) // Microsoft
{
window.attachEvent(''onload'', myFunction);
}

Answer 2

Aquí hay un método que uso que parece funcionar de manera confiable

function ready(func) {
var span = document.createElement(''span'');
var ms = 0;
setTimeout(function() {
try {
document.body.appendChild(span);
document.body.removeChild(span);
//Still here? Then document is ready
func();
} catch(e) {
//Whoops, document is not ready yet, try again...
setTimeout(arguments.callee, ms);
}
}, ms);
}

Muy simple, simplemente sigue intentando agregar un elemento <span> vacío a document.body . Si el documento no está "listo", se lanzará una excepción, en cuyo caso se intenta nuevamente con una nueva llamada a setTimeout . Una vez que no se lanza una excepción, llama a la función de devolución de llamada.

Me encantaría saber si hay algún problema con este método. Me ha funcionado bien, pero no he hecho las pruebas exhaustivas que serían naturales para cualquier marco de JavaScript popular.

Answer 3

Esta es la forma en que jQuery ajusta las funciones que está buscando: el fragmento no necesita jQuery y es compatible con varios navegadores. He reemplazado todas las llamadas a jQuery.ready () con su yourcallback , que debe definir.

Lo que sucede aquí:

• en primer lugar, se define la función DOMContentLoaded , que se usará cuando se desencadene el evento DOMContentLoaded; se asegura de que la devolución de llamada solo se realice una vez.
• un control si el documento ya está cargado; si es así, ejecute la devolución de llamada de inmediato
• de lo contrario, detecte las características ( document.addEventListener / document.attachEvent ) y vincule las devoluciones de llamadas (diferente para IE y navegadores normales, más la devolución de llamada de onload)

Levantado de jQuery 1.4.3, funciones bindReady () y DOMContentLoaded :

/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
//jQuery.ready();
yourcallback();
};
} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
// Make sure body exists, at least, in case IE gets a little overzealous
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", DOMContentLoaded );
//jQuery.ready();
yourcallback();
}
};
}
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
// ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
setTimeout( yourcallback, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
window.addEventListener( "load", yourcallback, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);
// A fallback to window.onload, that will always work
window.attachEvent( "onload", yourcallback );
}

Eso es 51 líneas de código JavaScript puro, solo para registrar el evento de manera confiable. Hasta donde yo sé, no hay un método más fácil. Va a mostrar para qué son útiles los envoltorios como jQuery: envuelven la capacidad de olfatear y los problemas de compatibilidad feos para que puedas concentrarte en otra cosa.

Answer 4

Esto es todo lo que necesita si es compatible con las versiones IE9 + y modernas (2013) de Chrome, FF, Safari, etc.

function ready(event) {
// your code here
console.log(''The DOM is ready.'', event);
// clean up event binding
window.removeEventListener(''DOMContentLoaded'', ready);
}
// bind to the load event
window.addEventListener(''DOMContentLoaded'', ready);

Answer 5

He visto muchas maneras diferentes de tratar de hacer esto. La manera más simple (sugerida por Yahoo inicialmente, creo) es llamar a la función de inicialización después de la etiqueta de cuerpo cerrado, un poco molesto, pero es una sola línea.

Answer 6

Tengo esto después de la etiqueta ''cerrar cuerpo'' y antes de la etiqueta ''cerrar html''. y funciona bastante bien La función de preajustes de carga asigna valores de ancho, alto y posición a las etiquetas div css. útil para diferentes tamaños de pantalla.

document.onreadystatechange = function () {
if (document.readyState == "interactive") {
loadPresets();
}

}

Answer 7

El código más pequeño de DOMReady, alguna vez.

<html>
<head>
<script>
var ready = function (f) {
(/complete|loaded|interactive/.test(document.readyState)) ?
f() :
setTimeout(ready, 9, f);
};
</script>
</head>
<body>
<script>
ready(function () {
alert(''DOM Ready!'');
});
</script>
</body>
</html>