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

https://stackoverflow.com/questions/807878

03-07-2019
|

Pregunta

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

Ahora, dado que el script se ejecuta antes de que la página se ha cargado, no puedo acceder a <body>, entre otras cosas. Me gustaría ejecutar JavaScript después de que el documento se haya & Quot; cargado & Quot; (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?

Solución

Estas soluciones funcionarán:

<body onload="script();">

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 se se considera más estándar .

Otros consejos

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

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

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

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 asíncrono y optimizar la carga de hojas de estilo

" cargar "

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.

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

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

Recursos 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 / Eventos

Puede poner un " onload " atributo dentro del cuerpo

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

O si está utilizando jQuery, puede hacerlo

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

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

Ejemplo :

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

De https: //developer.mozilla. org :

defer

Este atributo booleano está configurado para indicar a un navegador que el script   está destinado a ejecutarse después de analizar el documento, pero antes   disparando DOMContentLoaded.

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

Para lograr un efecto similar para las secuencias de comandos insertadas dinámicamente, use   asíncrono = falso en su lugar. Las secuencias de comandos con el atributo de aplazamiento se ejecutarán en   el orden en que aparecen en el documento.

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 etiqueta </body> (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: Diferir la representación de JS

Escribí esto en base a carga cancelada de javascript concepto de google de velocidad de página y también de este artículo Aplazar la carga de javascript

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

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

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

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

Working Fiddle

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

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

Si está utilizando jQuery,

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

es equivalente a

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

Ver ¿En qué evento se activa la función JQuery $ ()?

<body onload="myFunction()">

Este código funciona bien.

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

A veces encuentro en páginas más complejas 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); };

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 en aFunction() { }.

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

.ready () funciona mejor para mí.

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

.load () funcionará, pero no funcionará espere 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>

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

N.B. : para usar este código necesitas 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>

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

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

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

  // your javascript event

});

Como dice Daniel, puedes usar document.onload.

Los diversos frameworks javascript sin embargo (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, aumentarán enormemente su productividad.

Mi consejo es usar el atributo asnyc 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>

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

// your javascript event here

});
</script>

usa la función de autocarga de ejecución

window.onload = function (){
    /* statements */
}();

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow