Equivalente de JavaScript a $ .ready () de jQuery: cómo llamar a una función cuando la página / DOM está lista para ello



Answers

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í, según lo explicado por el autor original , es que estamos verificando la propiedad document.readyState . Si contiene la cadena (como sin uninitialized y loading , los primeros dos estados listos para DOM de 5) establecemos un tiempo de espera y comprobamos nuevamente. De lo contrario, ejecutamos la función aprobada.

Y aquí está el jsFiddle para el truco que funciona en todos los navegadores.

Gracias a Tutorialzine por incluir esto en su libro.

Question

Esta pregunta ya tiene una respuesta aquí:

De acuerdo, esta podría ser una pregunta tonta, aunque estoy seguro de que hay muchas otras personas haciendo la misma pregunta de vez en cuando. Yo, solo quiero estar 100% seguro de cualquier manera. Con jQuery todos sabemos lo maravilloso

$('document').ready(function(){});

Sin embargo, supongamos que quiero ejecutar una función que esté escrita en JavaScript estándar sin una biblioteca que la respalde, y que deseo 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 body :

<body onload="myFunction()">

... o incluso puedo intentar al final 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 $.ready() jQuery?




Aquí hay una versión Ram-swaroop's "trabaja 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 forma más complicada de hacerlo:

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);

Ver también ¿Cómo verificar si DOM está listo sin un marco? .




Si está haciendo VANILLA JavaScript sin jQuery, entonces 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 SHORTHAND así, que jQuery se ejecutará incluso después de que esté listo.

$(function() {
    console.log("ready!");
});

NO CONFUNDIRSE con ABAJO (que no está destinado a ser DOM listo):

NO use un IIFE como este que sea autoejecutable:

 Example:

(function() {
   // Your page initialization code here  - WRONG
   // The DOM will be available here   - WRONG
})();

Este IIFE NO esperará a que se cargue tu DOM. (¡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 admitir navegadores antiguos y nuevos.




No estoy muy seguro de lo que estás preguntando, pero tal vez esto pueda ayudar:

window.onload = function(){
    // Code. . .

}

O:

window.onload = main;

function main(){
    // Code. . .

}



Related