¿Cuál es el equivalente no jQuery de '$(document).ready()'?
¿ Cuál es el equivalente que no es jQuery $(document).ready()?
Esto funciona perfectamente, de ECMA. El fragmento es todo lo que necesita, pero si desea profundizar más y explorar otras opciones, consulte esta explicación detallada .
document.addEventListener("DOMContentLoaded", function() {
// code...
});
No window.onloades igual a JQuery $(document).readyporque $(document).readyespera solo hasta el árbol DOM mientras window.onloadverifica todos los elementos, incluidos los recursos externos y las imágenes.
EDITAR : Se agregó IE8 y equivalentes anteriores, gracias a la observación de Jan Derk . Puedes leer la fuente de este código en MDN:
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
Hay otras opciones además de "interactive". Consulte los documentos de MDN para obtener más detalles.
Una cosita que armé
domready.js
(function(exports, d) {
function domReady(fn, context) {
function onReady(event) {
d.removeEventListener("DOMContentLoaded", onReady);
fn.call(context || exports, event);
}
function onReadyIe(event) {
if (d.readyState === "complete") {
d.detachEvent("onreadystatechange", onReadyIe);
fn.call(context || exports, event);
}
}
d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
d.attachEvent && d.attachEvent("onreadystatechange", onReadyIe);
}
exports.domReady = domReady;
})(window, document);
Cómo usarlo
<script src="domready.js"></script>
<script>
domReady(function(event) {
alert("dom is ready!");
});
</script>
También puede cambiar el contexto en el que se ejecuta la devolución de llamada pasando un segundo argumento.
function init(event) {
alert("check the console");
this.log(event);
}
domReady(init, console);
