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




5 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í, 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.

javascript jquery html

Esta pregunta ya tiene una respuesta aquí:

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() ?




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.




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.




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. . .

}



document.ondomcontentready=function(){} debería hacer el truco, pero no tiene compatibilidad total con el navegador.

Parece que deberías usar jQuery min






Related