Aquí hay una versión limpia, sin uso de evaluación, de la variedad "funciona en todos los navegadores" de Ram-swaroop: ¡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 adicionales para ejecutarse, así que aquí hay una forma 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 verificar si DOM está listo sin un marco? .

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

Si está haciendo JavaScript sin formato VANILLA 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 está el equivalente de jQuery .ready :

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

Que TAMBIÉN podría escribirse de forma abreviada así, que jQuery ejecutará después de que ocurra el evento ready.

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

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

NO use un IIFE como este que es 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!)

Listo

 function ready(fn){var d=document;(d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();}

usar como

 ready(function(){ //some code });

Para 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+

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 explicó el autor original , es que estamos verificando la propiedad document.readyState . Si contiene la cadena (como in uninitialized y loading , los primeros dos estados DOM listos 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.

La buena gente de HubSpot tiene un recurso donde puede encontrar metodologías Javascript puras para lograr muchas de las bondades de jQuery, incluso ready

http://es posible que no necesite jquery.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'); });

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

Parece que deberías usar jQuery min

Su método (colocar el script antes de la etiqueta del cuerpo de cierre)

 <script> myFunction() </script> </body> </html>

es una forma confiable de admitir navegadores antiguos y nuevos.

Probado en IE9 y los últimos Firefox y Chrome y también compatible con 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 de jQuery o Dom ready sin compatibilidad con versiones anteriores. Probablemente necesite 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ó. 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 este script primero 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 asíncrono significa que se pueden descargar múltiples scripts simultáneamente mientras se sigue representando la página. Solo tenga cuidado cuando dependa de otros scripts cargados de forma asíncrona o use un minificador o algo como browserify para manejar las dependencias.