¿Cómo hacer que JavaScript se ejecute después de cargar la página?

Estoy ejecutando un script externo, usando un <script> dentro <head>.

Ahora que el script se ejecuta antes la página se ha cargado, no puedo acceder al <body>, entre otras cosas. Me gustaría ejecutar algo de JavaScript después de que el documento se haya "cargado" (HTML completamente descargado y en RAM). ¿Hay algún evento al que pueda engancharme cuando se ejecute mi script, que se activará al cargar la página?

preguntado el 30 de abril de 09 a las 13:04

24 Respuestas

Estas soluciones funcionarán:

<body onload="script();">

or

document.onload = function ...

o incluso

window.onload = function ...

Tenga en cuenta que la última opción es una mejor manera de hacerlo ya que es discreto y es considerado más estándar.

contestado el 23 de mayo de 17 a las 13:05

Cuál es la diferencia entre y document.onload = function ...? - Mentolipto

@mentoliptus: document.onload= no es molesto en.wikipedia.org/wiki/Unobtrusive_JavaScript - Marcgg

script en html ... no no no $ (function () {código aquí}); <- javascript.js se puede colocar en la cabeza y se cargará después de DOM - user1752532

@gerdi OP no mencionó nada sobre jQuery. También di una opción discreta en mi respuesta. - Marcgg

document.onload no funcionó para mí. Encontré esta publicación con el mismo problema stackoverflow.com/questions/5135638/…. No parece que document.onload sea una opción. - manchado

Tenga en cuenta que cargar la página tiene más de una etapa. Por cierto, esto es JavaScript puro

"DOMContentLoaded"

Este evento se dispara cuando el El documento HTML inicial se ha cargado y analizado por completo., sin esperar a que las hojas de estilo, las imágenes y los submarcos terminen de cargarse. En esta etapa, puede optimizar mediante programación la carga de imágenes y CSS en función del dispositivo del usuario o la velocidad del ancho de banda.

Se ejecuta después de que se cargue DOM (antes de img y css):

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Nota: JavaScript síncrono detiene el análisis del DOM. Si desea que el DOM se analice lo más rápido posible después de que el usuario solicitó la página, puede convierte tu JavaScript en asincrónico y optimizar la carga de hojas de estilo

"carga"

Un evento muy diferente, carga, solo debe usarse para detectar un página completamente cargada. Es un error increíblemente popular usar load donde DOMContentLoaded sería mucho más apropiado, así que tenga cuidado.

Se ejecuta después de que todo se carga y analiza:

window.addEventListener("load", function(){
    // ....
});

Recursos de MDN:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

Lista de MDN de todos los eventos:

https://developer.mozilla.org/en-US/docs/Web/Events

Respondido el 13 de enero de 20 a las 07:01

@Peter está bastante seguro de que esto está solo, probablemente sea mejor si está en la parte inferior de sus archivos javascript para que se ejecute al final - Arodebaugh

Javascript pausa el renderizado del DOM allí porque la mejor manera sería colocarlo en la parte inferior de la página o cargar javascript async en el encabezado. - DevWL

Esta es la respuesta más completa. onload está después, pero la gente no se da cuenta de esto al principio. - fuente

Re javascript asincrónico: para aclarar, hay dos opciones para los scripts que no se ejecutan inmediatamente. De aquellos, aplazar es generalmente preferible a Asincrónico - porque aplazar no interrumpirá el análisis / procesamiento de html, y cuando se ejecute, se garantiza que DOM estará listo. Cargue JavaScript de manera eficiente con diferir y asincrónico. - Fabricante de herramientasSteve

+1 lo intenté window.onload = ... pensando que mi script esperaría hasta que todo se descargó por completo antes de ejecutarse, pero parece window.onload en realidad se comporta como document.addEventListener("DOMContentLoaded", ..., mientras que el window.addEventListener("load", ... realmente espera a que todo se descargue por completo. Hubiera pensado que window.onload debe ser equivalente a window.addEventListener("load", ... más bien que document.addEventListener("DOMContentLoaded", ... ?? Obtuve el mismo resultado en Chrome y FF. - wkille

Una forma razonablemente portátil, sin marco, de hacer que su script configure una función para ejecutarse en el momento de la carga:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

Respondido 08 Oct 15, 14:10

+1 por publicar casi exactamente lo que se me ocurrió hace 6 meses. Un código como este puede ser necesario si otros marcos y código sobre los que no tiene control están agregando eventos de carga y también lo desea sin eliminar los otros eventos de carga. Incluí mi implementación como una función y requería var newonload = function (evt) {curronload (evt); newOnload (evt); } porque por alguna razón el marco que estoy usando requiere que se pase un evento al evento onload. - otorgar wagner

Acabo de descubrir en las pruebas que el código tal como está escrito da como resultado que los controladores se activen en un orden indefinido cuando se adjuntan con attachEvent (). Si el orden de ejecución del controlador es importante, es posible que desee omitir la rama window.attachEvent. - otorgar wagner

Entonces, esto agregará esta función como una función ADICIONAL para ejecutar OnLoad, ¿correcto? (en lugar de reemplazar un evento de carga existente) - Nichols de arcilla

@ClayNichols: Correcto. - caos

Buena solución, pero ahora desactualizada: desarrollador.mozilla.org/en-US/docs/Web/API/EventTarget/… - Renan

Puedes poner un atributo "onload" dentro del cuerpo.

...<body onload="myFunction()">...

O si está usando jQuery, puede hacer

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

Espero que responda a tu pregunta.

Tenga en cuenta que $ (window) .load se ejecutará después de que el documento se represente en su página.

Respondido 30 Abr '09, 17:04

Si los scripts se cargan dentro del <head> del documento, entonces es posible utilizar el defer atributo en la etiqueta de secuencia de comandos.

Ejemplo:

<script src="demo_defer.js" defer></script>

De https://developer.mozilla.org:

aplazar

Este atributo booleano está configurado para indicar a un navegador que la secuencia de comandos debe ejecutarse después de que se haya analizado el documento, pero antes de activar DOMContentLoaded.

Este atributo no debe usarse si el atributo src está ausente (es decir, para scripts en línea), en este caso no tendría ningún efecto.

Para lograr un efecto similar para los scripts insertados dinámicamente, use async = false en su lugar. Los scripts con el atributo defer se ejecutarán en el orden en que aparecen en el documento.

Respondido 21 Feb 18, 13:02

Me encanta esta solución, porque no necesito ningún código javascript, pero solo necesito un atributo html <3 - sarkiroka

Esto es fundamentalmente incorrecto. Aplazar no evita la carga de la página posterior a la ejecución. Ambos scripts diferidos y asíncronos se cargan antes de la carga de la página, en cambio, mejoran el tiempo de "domInteraction". - Akansh

@Akansh, el OP solo quería una forma de asegurarse de que el DOM se hubiera cargado antes de que se ejecute su script. Aplazar hace esto, está literalmente escrito en el fragmento de documentación que compartí en mi respuesta. - daniel precio

Aquí hay un script basado en la carga de js diferida después de que se carga la página,

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

¿Dónde coloco esto?

Pegue el código en su HTML justo antes del </body> etiqueta (cerca de la parte inferior de su archivo HTML).

¿Qué hacer?

Este código dice que espere a que se cargue todo el documento, luego cargue el archivo externo deferredfunctions.js.

Aquí hay un ejemplo del código anterior: Aplazar la representación de JS

Escribí esto basado en rechazó la carga de javascript el concepto de google de pagespeed y también de este artículo Aplazar la carga de JavaScript

respondido 22 mar '17, 10:03

Mira enganchar document.onload o en jQuery $(document).load(...).

Respondido 30 Abr '09, 17:04

¿Es este evento confiable? (Navegador cruzado .. IE6 + FF2 + etc) - petirrojo rodricks

Sí, esto es DOM estándar en varios navegadores. - Daniel A. Blanco

En realidad, es window.onload lo que es más estándar, no document.onload. HASTA DONDE SE - Peter Bailey

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

lo mismo para jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});





NOTA: - No use el marcado siguiente (porque sobrescribe otras declaraciones del mismo tipo):

document.onreadystatechange = ...

Respondido 06 Abr '20, 17:04

Violín de trabajo on <body onload="myFunction()">

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript">
   function myFunction(){
    alert("Page is loaded");
   }
  </script>
 </head>

 <body onload="myFunction()">
  <h1>Hello World!</h1>
 </body>    
</html>

Respondido 05 Abr '20, 13:04

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

Respondido el 23 de Septiembre de 19 a las 15:09

Si está utilizando jQuery,

$(function() {...});

es equivalente a

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

u otra mano corta:

$().ready(function () { })

Ver ¿En qué evento se activa JQuery $ function ()? y https://api.jquery.com/ready/

Respondido el 31 de diciembre de 19 a las 05:12

A veces encuentro en páginas más complejas que no todos los elementos se han cargado en la ventana de tiempo. Se activa la carga. Si ese es el caso, agregue setTimeout antes de que su función para retrasar es un momento. No es elegante, pero es un truco simple que se reproduce bien.

window.onload = function(){ doSomethingCool(); };

se convierte en ...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

Respondido el 11 de junio de 15 a las 11:06

document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

mira aquí: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx

Respondido el 11 de Septiembre de 14 a las 12:09

una línea: document.onload = function () {...} - colm.anseo

Solo define <body onload="aFunction()"> que se llamará después de que se haya cargado la página. Su código en el script está incluido por aFunction() { }.

respondido 08 nov., 16:02

<body onload="myFunction()">

Este código funciona bien.

Pero window.onload El método tiene varias dependencias. Por lo tanto, puede que no funcione todo el tiempo.

Respondido 29 Abr '13, 12:04

Usando el Biblioteca YUI (Me encanta):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

¡Portátil y hermoso! Sin embargo, si no usa YUI para otras cosas (vea su documento), diría que no vale la pena usarlo.

NB: para utilizar este código es necesario importar 2 scripts

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

Respondido 30 Abr '09, 18:04

Hay una muy buena documentación sobre cómo detectar si el documento se ha cargado usando Javascript o Jquery.

Usando el Javascript nativo esto se puede lograr

if (document.readyState === "complete") {
 init();
 }

Esto también se puede hacer dentro del intervalo.

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

Por ejemplo, por Mozilla

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Usando Jquery para verificar solo si DOM está listo

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Para verificar si todos los recursos están cargados, use window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

Respondido el 12 de diciembre de 15 a las 08:12

Use este código con la biblioteca jQuery, esto funcionaría perfectamente bien.

$(window).bind("load", function() { 

  // your javascript event

});

Respondido el 25 de diciembre de 17 a las 19:12

Agregue una descripción aquí - Mathews soleado

$(window).on("load", function(){ ... });

.Listo() funciona mejor para mí.

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

.carga() funcionará, pero no esperará hasta que se cargue la página.

jQuery(window).load(function () { ... });

No me funciona, rompe el siguiente script en línea. También estoy usando jQuery 3.2.1 junto con algunas otras bifurcaciones de jQuery.

Para ocultar la superposición de carga de mis sitios web, utilizo lo siguiente:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

Respondido el 23 de Septiembre de 19 a las 15:09

Comparación

En el siguiente fragmento, recopilo los métodos elegidos y muestro su secuencia. Observaciones

  • el document.onload (X) no es compatible con ningún navegador moderno (el evento nunca se encendido)
  • si usas <body onload="bodyOnLoad()"> (F) y al mismo tiempo window.onload (E) entonces solo se ejecutará el primero (porque anula el segundo)
  • controlador de eventos dado en <body onload="..."> (F) está envuelto por adicionales onload función
  • document.onreadystatechange (D) no anular document .addEventListener('readystatechange'...) (C) probablemente cecasue onXYZevent-like los métodos son independientes de addEventListener colas (lo que permite agregar múltiples oyentes). Probablemente no ocurra nada entre la ejecución de estos dos controladores.
  • todos los scripts escriben su marca de tiempo en la consola, pero los scripts que también tienen acceso a div escriba sus marcas de tiempo también en el cuerpo (haga clic en el enlace "Página completa" después de la ejecución del script para verlo).
  • soluciones readystatechange (C, D) se ejecutan varias veces por el navegador, pero para diferentes estados de documento:
    • carga - el documento se está cargando (no se disparó en el fragmento)
    • interactivo - el documento se analiza, se dispara antes DOMContentLoaded
    • completar - el documento y los recursos se cargan, se disparan antes body/window onload

<html>

<head>
  <script>
    // solution A
    console.log(`[timestamp: ${Date.now()}] A: Head script`);
    
    // solution B
    document.addEventListener("DOMContentLoaded", () => {
      print(`[timestamp: ${Date.now()}] B: DOMContentLoaded`);
    });

    // solution C
    document.addEventListener('readystatechange', () => {
      print(`[timestamp: ${Date.now()}] C: ReadyState: ${document.readyState}`);
    });
   
    // solution D
    document.onreadystatechange = s=> {print(`[timestamp: ${Date.now()}] D: document.onreadystatechange ReadyState: ${document.readyState}`)};
    
    // solution E (never executed)
    window.onload = () => {
      print(`E: <body onload="..."> override this handler`);
    };

    // solution F
    function bodyOnLoad() {
      print(`[timestamp: ${Date.now()}] F: <body onload='...'>`);      
      infoAboutOnLoad(); // additional info
    }
    
    // solution X
    document.onload = () => {print(`document.onload is never fired`)};



    // HELPERS

    function print(txt) { 
      console.log(txt);
      if(mydiv) mydiv.innerHTML += txt.replace('<','&lt;').replace('>','&gt;') + '<br>';
    }
    
    function infoAboutOnLoad() {
      console.log("window.onload (after  override):", (''+document.body.onload).replace(/\s+/g,' '));
      console.log(`body.onload==window.onload --> ${document.body.onload==window.onload}`);
    }
            
    console.log("window.onload (before override):", (''+document.body.onload).replace(/\s+/g,' '));

  </script>
</head>

<body onload="bodyOnLoad()">
  <div id="mydiv"></div>

  <!-- this script must te at the bottom of <body> -->
  <script>
    // solution G
    print(`[timestamp: ${Date.now()}] G: <body> bottom script`);
  </script>
</body>

</html>

Respondido el 17 de junio de 20 a las 19:06

Como dice Daniel, podrías usar document.onload.

Sin embargo, los diversos marcos de javascript (jQuery, Mootools, etc.) usan un evento personalizado 'domready', que supongo que debe ser más efectivo. Si está desarrollando con javascript, le recomiendo encarecidamente que aproveche un marco, ya que aumentan enormemente su productividad.

Respondido 30 Abr '09, 17:04

Mi consejo uso asnyc atributo para la etiqueta de script que le ayuda a cargar los scripts externos después de cargar la página

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

respondido 30 mar '15, 06:03

Según w3schools, Si async está presente: el script se ejecuta de forma asincrónica con el resto de la página (el script se ejecutará mientras la página continúa el análisis). Quizás quisiste decir defer en cambio, como @Daniel Price mencionó? - jk7

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>

Respondido el 08 de junio de 18 a las 15:06

Esta respuesta depende de jquery: chiptus

En términos simples, simplemente use "aplazar" en la etiqueta de secuencia de comandos.

.....

Respondido 27 Oct 20, 04:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.