javascript - examples - ¿Cuál es el equivalente no jQuery de ''$(document).ready()''?
jquery syntax (9)
¿Cuál es el equivalente no jQuery de $(document).ready() ?
¿En JavaScript de vainilla normal, sin bibliotecas? Es un error $ es simplemente un identificador, y no está definido a menos que lo defina.
jQuery define $ como su propio "objeto de todo" (también conocido como jQuery por lo que puede usarlo sin conflicto con otras bibliotecas). Si no está utilizando jQuery (o alguna otra biblioteca que lo define), entonces no se definirá $ .
¿O estás preguntando cuál es el equivalente en JavaScript simple? En ese caso, es probable que desee window.onload , que no es exactamente equivalente, pero es la forma más rápida y sencilla de acercarse al mismo efecto en el JavaScript de vainilla.
El cuerpo onLoad también podría ser una alternativa:
<html>
<head><title>Body onLoad Exmaple</title>
<script type="text/javascript">
function window_onload() {
//do something
}
</script>
</head>
<body onLoad="window_onload()">
</body>
</html>
Esto funciona perfectamente, desde ECMA.
document.addEventListener("DOMContentLoaded", function() {
// code...
});
El window.onload no es igual a JQuery $(document).ready porque $(document).ready solo espera en el árbol DOM mientras window.onload comprueba todos los elementos, incluidos los activos externos y las imágenes.
EDITAR : Se agregó IE8 y su equivalente anterior, gracias a la observación de Jan Derk . Puede leer la fuente de este código en MDN en este enlace :
// alternative to DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// Initialize your application or run some code.
}
}
Hay otras opciones aparte de "interactive" . Vea el enlace de MDN para más detalles.
Existe un reemplazo basado en estándares, DOMContentLoaded que es compatible con más del 90% de los navegadores, pero no con IE8 (por lo tanto, debajo del uso del código por parte de JQuery para el soporte del navegador) :
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
La función nativa de jQuery es mucho más complicada que solo window.onload, como se muestra a continuación.
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
jQuery.ready();
}, 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", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
jQuery.ready();
}
});
// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
if ( jQuery.isReady ) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready );
}
La forma más fácil en los navegadores recientes sería usar los GlobalEventHandlers apropiados, onDOMContentLoaded , onload , onloadeddata (...)
onDOMContentLoaded = (function(){ console.log("DOM ready!") })()
onload = (function(){ console.log("Page fully loaded!") })()
onloadeddata = (function(){ console.log("Data loaded!") })()
El evento DOMContentLoaded se activa cuando el documento HTML inicial se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, las imágenes y las subtramas terminen de cargarse. Se debe usar una carga de eventos muy diferente solo para detectar una página completamente cargada. Es un error increíblemente popular utilizar la carga donde DOMContentLoaded sería mucho más apropiado, así que tenga cuidado.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
La función utilizada es un IIFE, muy útil en este caso, ya que se dispara cuando está listo:
https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
Obviamente, es más apropiado colocarlo al final de cualquier script.
En ES6, también podemos escribirlo como una función de flecha:
onload = (() => { console.log("ES6 page fully loaded!") })()
Lo mejor es usar los elementos DOM, podemos esperar que cualquier variable esté lista, que dispare un IIFE con flecha.
El comportamiento será el mismo, pero con menos impacto de memoria.
footer = (() => { console.log("Footer loaded!") })()
<div id="footer">
En muchos casos, el objeto de documento también se dispara cuando está listo , al menos en mi navegador. La sintaxis es muy buena, pero necesita más pruebas sobre las compatibilidades.
document=(()=>{ /*Ready*/ })()
Lo bueno de $(document).ready() es que se dispara antes de window.onload . La función de carga espera a que se cargue todo, incluidos los activos externos y las imágenes. $(document).ready , sin embargo, se dispara cuando el árbol DOM está completo y puede ser manipulado. Si desea obtener un DOM listo, sin jQuery, puede ingresar en esta biblioteca. Alguien extrajo la parte ready de jQuery. Es bonito y pequeño y puede que te resulte útil:
No creo que JavaScript tenga esa función incorporada. Es específico de jQuery.
Según http://youmightnotneedjquery.com/#ready un buen reemplazo que aún funciona con IE8 es
function ready(fn) {
if (document.readyState != ''loading'') {
fn();
} else if (document.addEventListener) {
document.addEventListener(''DOMContentLoaded'', fn);
} else {
document.attachEvent(''onreadystatechange'', function() {
if (document.readyState != ''loading'')
fn();
});
}
}
Personalmente también me gustaría verificar si el tipo de fn es una función.
La razón por la que respondo esta pregunta tarde es porque estaba buscando esta respuesta pero no la encontré aquí. Y creo que esta es la mejor solución.
Una pequeña cosa que puse juntos
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);