javascript - usar - jquery 3
JavaScript puro equivalente a $.ready() de jQuery: cómo llamar a una función cuando la página/DOM está lista para ella (10)
Listo
function ready(fn){var d=document;(d.readyState==''loading'')?d.addEventListener(''DOMContentLoaded'',fn):fn();}
Utilizar como
ready(function(){
//some code
});
Para el código de autoinvocación
(function(fn){var d=document;(d.readyState==''loading'')?d.addEventListener(''DOMContentLoaded'',fn):fn();})(function(){
//Some Code here
//DOM is avaliable
//var h1s = document.querySelector("h1");
});
Soporte: IE9 +
Esta pregunta ya tiene una respuesta aquí:
- $ (documento) .ready equivalente sin jQuery 32 respuestas
Bien, esto podría ser una pregunta tonta, aunque estoy seguro de que hay muchas otras personas que hacen la misma pregunta de vez en cuando. Yo, solo quiero asegurarme al 100% de cualquier manera. Con jQuery todos conocemos lo maravilloso.
$(''document'').ready(function(){});
Sin embargo, digamos que quiero ejecutar una función que está escrita en JavaScript estándar sin una biblioteca que lo respalde, y que quiero iniciar una función tan pronto como la página esté lista para manejarla. ¿Cuál es la forma correcta de abordar esto?
Sé que puedo hacer:
window.onload="myFunction()";
... o puedo usar la etiqueta del body :
<body onload="myFunction()">
... o incluso puedo intentarlo en la parte inferior de la página después de todo, pero el body final o la etiqueta html como:
<script type="text/javascript">
myFunction();
</script>
¿Qué es un método compatible con varios navegadores (antiguo / nuevo) para emitir una o más funciones de una manera como jQuery''s $.ready() ?
Aquí hay una versión limpia, que no utiliza Ram-swaroop''s "funciona en todos los navegadores" de Ram-swaroop''s ¡funciona en todos los navegadores!
function onReady(yourMethod) {
var readyStateCheckInterval = setInterval(function() {
if (document && document.readyState === ''complete'') { // Or ''interactive''
clearInterval(readyStateCheckInterval);
yourMethod();
}
}, 10);
}
// use like
onReady(function() { alert(''hello''); } );
Sin embargo, espera 10 ms extra para ejecutarse, así que aquí hay una manera más complicada que no debería:
function onReady(yourMethod) {
if (document.readyState === ''complete'') { // Or also compare to ''interactive''
setTimeout(yourMethod, 1); // Schedule to run immediately
}
else {
readyStateCheckInterval = setInterval(function() {
if (document.readyState === ''complete'') { // Or also compare to ''interactive''
clearInterval(readyStateCheckInterval);
yourMethod();
}
}, 10);
}
}
// Use like
onReady(function() { alert(''hello''); } );
// Or
onReady(functionName);
Consulte también ¿Cómo comprobar si DOM está listo sin un marco? .
La buena gente de HubSpot tiene un recurso donde puede encontrar metodologías puras de Javascript para lograr una gran cantidad de bondad jQuery, incluso ready
http://youmightnotneedjquery.com/#ready
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();
});
}
}
Ejemplo de uso en línea:
ready(function() { alert(''hello''); });
Lo más simple que se puede hacer en ausencia de un marco que haga toda la compatibilidad entre navegadores para usted es simplemente realizar una llamada a su código al final del cuerpo. Esto es más rápido de ejecutar que un controlador onload porque solo espera que el DOM esté listo, no que todas las imágenes se carguen. Y, esto funciona en todos los navegadores.
<html>
<head>
</head>
<body>
Your HTML here
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
</script>
</body>
</html>
Si realmente no quieres hacerlo de esta manera y necesitas compatibilidad con varios navegadores y no quieres esperar a que window.onload , entonces probablemente deberías ver cómo un framework como jQuery implementa $(document).ready() método $(document).ready() Es bastante complicado dependiendo de las capacidades del navegador.
Para darle una pequeña idea de lo que hace jQuery (que funcionará en cualquier lugar donde se coloque la etiqueta de script).
Si es compatible, intenta el estándar:
document.addEventListener(''DOMContentLoaded'', fn, false);
con un respaldo a:
window.addEventListener(''load'', fn, false )
o para versiones anteriores de IE, utiliza:
document.attachEvent("onreadystatechange", fn);
con un respaldo a:
window.attachEvent("onload", fn);
Y, hay algunas soluciones en la ruta del código de IE que no sigo del todo, pero parece que tiene algo que ver con los marcos.
Aquí hay un sustituto completo de jQuery''s .ready() escrito en javascript simple:
(function(funcName, baseObj) {
// The public function name defaults to window.docReady
// but you can pass in your own object and own function name and those will be used
// if you want to put them in a different namespace
funcName = funcName || "docReady";
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
// call this when the document is ready
// this function protects itself against being called more than once
function ready() {
if (!readyFired) {
// this must be set to true before we start calling callbacks
readyFired = true;
for (var i = 0; i < readyList.length; i++) {
// if a callback here happens to add new ready handlers,
// the docReady() function will see that it already fired
// and will schedule the callback to run right after
// this event loop finishes so all handlers will still execute
// in order and no new ones will be added to the readyList
// while we are processing the list
readyList[i].fn.call(window, readyList[i].ctx);
}
// allow any closures held by these functions to free
readyList = [];
}
}
function readyStateChange() {
if ( document.readyState === "complete" ) {
ready();
}
}
// This is the one public interface
// docReady(fn, context);
// the context argument is optional - if present, it will be passed
// as an argument to the callback
baseObj[funcName] = function(callback, context) {
if (typeof callback !== "function") {
throw new TypeError("callback for docReady(fn) must be a function");
}
// if ready has already fired, then just schedule the callback
// to fire asynchronously, but right away
if (readyFired) {
setTimeout(function() {callback(context);}, 1);
return;
} else {
// add the function and context to the list
readyList.push({fn: callback, ctx: context});
}
// if document already ready to go, schedule the ready function to run
if (document.readyState === "complete") {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
// otherwise if we don''t have event handlers installed, install them
if (document.addEventListener) {
// first choice is DOMContentLoaded event
document.addEventListener("DOMContentLoaded", ready, false);
// backup is window load event
window.addEventListener("load", ready, false);
} else {
// must be IE
document.attachEvent("onreadystatechange", readyStateChange);
window.attachEvent("onload", ready);
}
readyEventHandlersInstalled = true;
}
}
})("docReady", window);
La última versión del código se comparte públicamente en GitHub en https://github.com/jfriend00/docReady
Uso:
// pass a function reference
docReady(fn);
// use an anonymous function
docReady(function() {
// code here
});
// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);
// use an anonymous function with a context
docReady(function(context) {
// code here that can use the context argument that was passed to docReady
}, ctx);
Esto ha sido probado en:
IE6 and up
Firefox 3.6 and up
Chrome 14 and up
Safari 5.1 and up
Opera 11.6 and up
Multiple iOS devices
Multiple Android devices
Implementación de trabajo y banco de pruebas: http://jsfiddle.net/jfriend00/YfD3C/
Aquí hay un resumen de cómo funciona:
- Cree un IIFE (expresión de función invocada de inmediato) para que podamos tener variables de estado no públicas.
- Declarar una función pública
docReady(fn, context) - Cuando se
docReady(fn, context), verifique si el controlador listo ya se ha activado. Si es así, simplemente programe la devolución de llamada recién agregada para que sesetTimeout(fn, 1)justo después de que este hilo de JS finalice consetTimeout(fn, 1). - Si el manejador listo no se ha activado, agregue esta nueva devolución de llamada a la lista de devoluciones de llamada que se llamarán más adelante.
- Compruebe si el documento ya está listo. Si es así, ejecute todos los manejadores listos.
- Si aún no hemos instalado los detectores de eventos para saber cuándo estará listo el documento, instálelos ahora.
- Si existe
document.addEventListener, instale los controladores de eventos usando.addEventListener()para los"DOMContentLoaded"y"load". La "carga" es un evento de respaldo por seguridad y no debería ser necesario. - Si
document.addEventListenerno existe, instale los controladores de eventos usando.attachEvent()para los"onreadystatechange"y"onload". - En el evento
onreadystatechange, verifique sidocument.readyState === "complete"y, de ser así, llame a una función para activar todos los controladores listos. - En todos los demás controladores de eventos, llame a una función para activar todos los controladores listos.
- En la función para llamar a todos los manejadores listos, verifique una variable de estado para ver si ya hemos disparado. Si tenemos, no hacemos nada. Si aún no hemos sido llamados, recorra la serie de funciones listas y llame a cada una en el orden en que fueron agregadas. Establezca un indicador para indicar que se han llamado a todos para que nunca se ejecuten más de una vez.
- Borre la matriz de funciones para que se puedan liberar todos los cierres que puedan estar usando.
Los manejadores registrados con docReady() están garantizados para ser despedidos en el orden en que fueron registrados.
Si llama a docReady(fn) después de que el documento ya está listo, la devolución de llamada se programará para que se ejecute tan pronto como la setTimeout(fn, 1) de ejecución actual se complete con setTimeout(fn, 1) . Esto permite que el código de llamada siempre asuma que son devoluciones de llamada asíncronas que se llamarán más tarde, incluso si más tarde es tan pronto como el hilo actual de JS finaliza y conserva el orden de llamada.
Me gustaría mencionar algunas de las formas posibles aquí junto con un truco de javascript puro que funciona en todos los navegadores :
// with jQuery
$(document).ready(function(){ /* ... */ });
// shorter jQuery version
$(function(){ /* ... */ });
// without jQuery (doesn''t work in older IEs)
document.addEventListener(''DOMContentLoaded'', function(){
// your code goes here
}, false);
// and here''s the trick (works everywhere)
function r(f){/in/.test(document.readyState)?setTimeout(''r(''+f+'')'',9):f()}
// use like
r(function(){
alert(''DOM Ready!'');
});
El truco aquí, como lo explica el autor original , es que estamos verificando la propiedad document.readyState . Si contiene la cadena in (como en uninitialized y loading , los dos primeros estados listos para DOM de 5) establecemos un tiempo de espera y verificamos nuevamente. De lo contrario, ejecutamos la función pasada.
Y aquí está el jsFiddle para el truco que funciona en todos los navegadores.
Gracias a Tutorialzine por incluir esto en su libro.
No estoy muy seguro de lo que estás preguntando, pero quizás esto pueda ayudar:
window.onload = function(){
// Code. . .
}
O:
window.onload = main;
function main(){
// Code. . .
}
Probado en IE9, y lo último en Firefox y Chrome, y también en IE8.
document.onreadystatechange = function () {
var state = document.readyState;
if (state == ''interactive'') {
init();
} else if (state == ''complete'') {
initOnCompleteLoad();
}
};
Ejemplo: http://jsfiddle.net/electricvisions/Jacck/
ACTUALIZACIÓN - versión reutilizable
Acabo de desarrollar lo siguiente. Es un equivalente bastante simplista a jQuery o Dom listo sin compatibilidad con versiones anteriores. Probablemente necesita más refinamiento. Probado en las últimas versiones de Chrome, Firefox e IE (10/11) y debería funcionar en navegadores más antiguos como se comentó. Voy a actualizar si encuentro algún problema.
window.readyHandlers = [];
window.ready = function ready(handler) {
window.readyHandlers.push(handler);
handleState();
};
window.handleState = function handleState () {
if ([''interactive'', ''complete''].indexOf(document.readyState) > -1) {
while(window.readyHandlers.length > 0) {
(window.readyHandlers.shift())();
}
}
};
document.onreadystatechange = window.handleState;
Uso:
ready(function () {
// your code here
});
Está escrito para manejar la carga asíncrona de JS, pero es posible que desee sincronizar la carga de esta secuencia de comandos a menos que esté minimizando. Lo he encontrado útil en el desarrollo.
Los navegadores modernos también admiten la carga asíncrona de scripts, lo que mejora aún más la experiencia. El soporte para async significa que se pueden descargar múltiples scripts simultáneamente mientras se renderiza la página. Solo tenga cuidado cuando dependa de otros scripts cargados de forma asíncrona o use un minificador o algo así como browserify para manejar las dependencias.
Si está utilizando VANILLA plain JavaScript sin jQuery, debe usar (Internet Explorer 9 o posterior):
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
});
Arriba es el equivalente de jQuery .ready :
$(document).ready(function() {
console.log("Ready!");
});
Que TAMBIÉN podría escribirse de forma CORTA como esta, que jQuery ejecutará después de que se occurs preparación.
$(function() {
console.log("ready!");
});
NO DEBE SER CONFUNDIDO CON ABAJO (que no debe estar listo para DOM):
NO use un IIFE como este que se ejecuta automáticamente:
Example:
(function() {
// Your page initialization code here - WRONG
// The DOM will be available here - WRONG
})();
Este IIFE NO esperará a que su DOM se cargue. (Incluso estoy hablando de la última versión del navegador Chrome!)
Su método (colocando el script antes de la etiqueta de cierre del cuerpo)
<script>
myFunction()
</script>
</body>
</html>
Es una forma confiable de soportar navegadores antiguos y nuevos.
document.ondomcontentready=function(){} debería hacer el truco, pero no tiene compatibilidad total con el navegador.
Parece que deberías usar jQuery min