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

739

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

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

javascript html dom-events pageload El flash
fuente

Respuestas:

839

Estas soluciones funcionarán:

<body onload="script();">

o

document.onload = function ...

o incluso

window.onload = function ...

Tenga en cuenta que la última opción es una mejor opción, ya que es discreta y se considera más estándar .

marcgg
fuente
55
¿Cuál es la diferencia entre <body onload = "script ();"> y document.onload = function ...?
Mentoliptus
11
@mentoliptus: document.onload=no es molesto en.wikipedia.org/wiki/Unobtrusive_JavaScript
marcgg
3
script en el html ... no no no $ (function () {code here}); <- javascript.js se puede colocar en la cabeza y se cargará después de DOM
21
@gerdi OP no mencionó nada sobre jQuery. También di una opción discreta en mi respuesta.
marcgg
1
document.onload no me funcionó. Encontré esta publicación con el mismo problema stackoverflow.com/questions/5135638/… . No parece que document.onload es una opción.
spottedmahn
197

Forma razonablemente portátil y no marco de hacer que su script establezca 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;
    }
}
caos
fuente
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ódigos sobre los que no tiene control están agregando eventos de carga y desea también 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 de carga.
Grant Wagner el
66
Acabo de descubrir en las pruebas que el código como resultado de los manejadores se activa en un orden indefinido cuando se adjunta con attachEvent (). Si la orden de ejecución del controlador es importante, es posible que desee dejar de lado la rama window.attachEvent.
Grant 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)
Clay Nichols
@ClayNichols: Correcto.
caos
2
Buena solución, pero ahora obsoleta: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
Renan
192

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

"DOMContentLoaded"

Este evento se activa cuando el documento HTML inicial se ha cargado y analizado por completo , sin esperar a que las hojas de estilo, las imágenes y los subtramas terminen de cargarse. En esta etapa, podría optimizar mediante programación la carga de imágenes y css según el dispositivo del usuario o la velocidad del ancho de banda.

Se ejecuta después de cargar DOM (antes de img y css): 

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

Nota: JavaScript síncrono pausa 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 convertir su JavaScript en asíncrono y optimizar la carga de hojas de estilo

"carga"

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

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 MDN de todos los eventos:

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

DevWL
fuente
1
@Peter bastante seguro de que se encuentra solo, probablemente, mejor si es en el fondo de sus archivos javascript por lo que se ejecuta la última
arodebaugh
Javascript detiene el procesamiento del DOM allí, de la mejor manera sería colocarlo en la parte inferior de la página o cargar JavaScript asíncrono en el encabezado.
DevWL
Esta es la respuesta más completa. después de la carga, pero la gente no se da cuenta de esto al principio.
tfont
1
Re javascript asíncrono : para aclarar, hay dos opciones para los scripts que no se ejecutan de inmediato. De ellos, diferir generalmente es preferible a asíncrono , porque diferir no interrumpirá el análisis / renderizado html, y cuando se ejecuta, se garantiza que DOM estará listo. Cargue JavaScript de manera eficiente con aplazamiento y asíncrono .
ToolmakerSteve
Intenté window.onload = ...pensar que mi script esperaría hasta que todo se descargara completamente antes de ejecutarse, pero parece que window.onloadrealmente se comporta así document.addEventListener("DOMContentLoaded", ..., mientras que window.addEventListener("load", ...realmente espera que todo se descargue completamente. Hubiera pensado que window.onloaddebería ser equivalente a window.addEventListener("load", ...más que document.addEventListener("DOMContentLoaded", ...?? Obtuve el mismo resultado en Chrome y FF.
wkille
121

Puedes poner un atributo "onload" dentro del cuerpo

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

O si está utilizando jQuery, puede hacer 

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

or 

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

Espero que responda tu pregunta.

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

Nordes
fuente
65

Si los scripts se cargan dentro <head>del documento, entonces es posible usar el deferatributo en la etiqueta del script.

Ejemplo:

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

Desde https://developer.mozilla.org :

aplazar

Este atributo booleano está configurado para indicar a un navegador que el script debe ejecutarse después de analizar 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. Las secuencias de comandos con el atributo de aplazamiento se ejecutarán en el orden en que aparecen en el documento.

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

Aquí hay un script basado en la carga diferida de js después de cargar 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 de la </body>etiqueta (cerca de la parte inferior de su archivo HTML).

¿Qué hace?

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 la carga rechazada del concepto de google de velocidad de página de JavaScript y también provengo de este artículo Aplazar la carga de JavaScript

Suerte
fuente
21

Mira enganchar document.onloado en jQuery $(document).load(...).

Daniel A. White
fuente
¿Es confiable este evento? (Navegador cruzado ... IE6 + FF2 + etc.)
TheFlash el
1
Sí, esto es cross-browser, DOM estándar.
Daniel A. White el
16
En realidad, es window.onload lo que es más estándar, no document.onload. AFAIK
Peter Bailey
11

Fiddle de trabajo en<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>
Aamir Shahzad
fuente
10 
<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

Frankey
fuente
7

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

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

se convierte en ...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Charles Jaimet
fuente
5

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

Norbert Hartl
fuente
4 
<body onload="myFunction()">

Este código funciona bien.

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

Akarsh Satija
fuente
3

Usando la 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 usar este código necesita 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>
Valentin Jacquemin
fuente
3

Existe 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" );
    });

fuente
3

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

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

  // your javascript event

});
Harish Kumar
fuente
Agregue alguna descripción aquí
Mathews Sunny
3 
$(window).on("load", function(){ ... });

.ready () funciona mejor para mí.

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

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

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

No funciona para mí, rompe el siguiente script en línea. También estoy usando jQuery 3.2.1 junto con algunos otros tenedores 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>
Zach Reynolds
fuente
3

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 utilice el marcado a continuación (porque sobrescribe otras declaraciones del mismo tipo):

document.onreadystatechange = ...
T.Todua
fuente
1

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

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

Iain
fuente
1 

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

// your javascript event here

});
</script>
Expandir fragmento

Vô Vị
fuente
44
Esta respuesta depende de jquery
Chiptus
0

Mi consejo es usar el asnycatributo 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>
Kalidass
fuente
77
De acuerdo con w3schools , si está presente la sincronización : 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 quiso decir defer, como mencionó @Daniel Price?
jk7
0

utilizar la función de autocarga de carga

window.onload = function (){
    /* statements */
}();
usuario7087840
fuente
2
Puede anular otros onloadcontroladores utilizando este enfoque. En cambio, debe agregar oyente.
Leonid Dashko