Pregunta JavaScript que se ejecuta después de la carga de la página


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

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


524
2018-04-30 16:38


origen


Respuestas:


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 manera de ir ya que es discreto y es considerado más estándar.


600
2018-04-30 16:41



Una forma razonablemente portátil y sin marco de tener su secuencia de comandos establecida como una función para ejecutar en tiempo de 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;
    }
}

172
2018-04-30 16:59



Puedes poner un atributo de "carga" 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 represente en su página.


108
2018-04-30 16:42



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

"DOMContentLoaded"

Este evento se dispara cuando el documento HTML inicial ha sido completamente cargado y analizado, sin esperar a que las hojas de estilo, imágenes y subtramas finalicen la carga. En esta etapa, puede optimizar de forma programática la carga de imágenes y CSS en función del dispositivo del usuario o la velocidad del ancho de banda.

Ejecuciones después de que DOM esté cargado (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 solicite la página, podría convierte tu JavaScript asíncrono 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.

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

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


72
2018-03-19 00:50



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

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   está destinado a ser ejecutado después de que el documento haya sido analizado, pero antes   disparando DOMContentLoaded.

Este atributo no debe usarse si el src   atributo está ausente (es decir, para scripts en línea), en este caso sería   no tiene efecto

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


44
2018-01-10 08:52



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 del </body> etiqueta (cerca de la parte inferior de su archivo HTML).

¿Qué hace?

Este código dice esperar a que se cargue todo el documento y luego cargar el    archivo externo deferredfunctions.js.

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

Escribí esto basado en carga de Javascript propuesta concepto de Google Pagespeed y también procedente de este artículo Diferir la carga de JavaScript


22
2018-02-05 12:40



Mira el enganche document.onload o en jQuery $(document).load(...).


20
2018-04-30 16:40



El mejor método, recomendado por Google también. :)

<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


6
2017-09-11 19:23



Fiddle de trabajo

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

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

6
2018-03-26 09:39



Si está utilizando jQuery,

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

es equivalente a

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

Ver ¿Qué evento activa JQuery $ function ()?


4
2018-03-06 20:39



<body onload="myFunction()">

Este código funciona bien.

Pero window.onload método tiene varias dependencias. Entonces puede no funcionar todo el tiempo.


4
2018-04-29 11:32