Javascript en la carga de la página
El uso de defer se activará después de domInteractive (document.readyState = “interactive”) y justo antes de que se active el evento “DOMContentLoaded”. Si necesitas ejecutar el script después de que se hayan cargado todos los recursos (imágenes, scripts) utiliza el evento “load” o apunta a uno de los estados de document.readyState. Lea más abajo para obtener más información sobre estos eventos / estados, así como los atributos async y defer correspondientes a la obtención y ejecución del script.
Este evento se dispara cuando el documento HTML inicial ha sido completamente cargado y analizado, sin esperar a que las hojas de estilo, las imágenes y los subcuadros terminen de cargarse. En esta etapa se podría optimizar mediante programación la carga de imágenes y CSS en función del dispositivo del usuario o de la velocidad del ancho de banda.
Un evento muy diferente, **load**, sólo debería utilizarse 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 ten cuidado.
* En la imagen de abajo la etiqueta amarilla “Ready” indica el momento en que se termina de cargar el HTML DOM. Entonces se dispara: document.readyState = “interactive” >>> scripts diferidos >>> evento DOMContentLoaded (es secuencial);
¿Cuáles son las formas de ejecutar JavaScript después de la carga de la página?
Si necesitas ejecutar el script después de que se hayan cargado todos los recursos (imágenes, scripts) utiliza el evento “load” o apunta a uno del documento.
¿Cómo puedo activar un script al cargar la página?
Método 1: Utilizar el método onload: El cuerpo de una página web contiene el contenido real que se va a mostrar. El evento onload se produce cuando el elemento ha terminado de cargar. Esto se puede utilizar con el elemento body para ejecutar un script después de que la página web se haya cargado completamente.
¿Puedo ejecutar JavaScript antes de que se cargue toda la página?
Puede ejecutar el código javascript en cualquier momento. AFAIK se ejecuta en el momento en que el navegador llega a la etiqueta <script> en la que se encuentra. Pero no puede acceder a elementos que aún no están cargados.
Jquery onload
La otra forma de conseguir el mismo resultado es utilizando onload dentro de la etiqueta body de la página. Puedes leer este artículo sobre cómo mantener el manejador del evento onload para establecer el foco en la etiqueta input una vez que la página se carga.
Digamos que queremos seleccionar el texto presente dentro de un cuadro de texto tan pronto como se cargue la página. Esto no es posible usando el evento window.onload pero sí es posible usando el comando body onload. El código de abajo generará un mensaje de error.
Amar27-11-2014Ambos códigos de arriba en comparación son iguales.Azim24-06-2015Muchas graciasdiya01-02-2016No entendí la diferencia, cuando onload está en el cuerpo y la cabeza, si se trata de la cabeza se dio cuenta de que debería estar dando “window.onload=mi_código();” pero para el cuerpo que debería estar dando window.onload=mi_código;
Cargar javascript después de la carga de la página
El uso de defer se activará después de domInteractive (document.readyState = “interactive”) y justo antes de que se active el evento “DOMContentLoaded”. Si necesitas ejecutar el script después de que se hayan cargado todos los recursos (imágenes, scripts) utiliza el evento “load” o apunta a uno de los estados de document.readyState. Lea más abajo para obtener más información sobre estos eventos / estados, así como los atributos async y defer correspondientes a la obtención y ejecución del script.
Este evento se dispara cuando el documento HTML inicial ha sido completamente cargado y analizado, sin esperar a que las hojas de estilo, las imágenes y los subcuadros terminen de cargarse. En esta etapa se podría optimizar mediante programación la carga de imágenes y CSS en función del dispositivo del usuario o de la velocidad del ancho de banda.
Un evento muy diferente, **load**, sólo debería utilizarse 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 ten cuidado.
* En la imagen de abajo la etiqueta amarilla “Ready” indica el momento en que se termina de cargar el HTML DOM. Entonces se dispara: document.readyState = “interactive” >>> scripts diferidos >>> evento DOMContentLoaded (es secuencial);
Carga de advenimiento
Al encontrar este elemento en una página, los navegadores cargarán el archivo myscript.js y lo ejecutarán. Cualquier contenido dentro del propio elemento script será omitido cuando se proporcione un atributo src. El siguiente ejemplo cargará el archivo myscript.js y ejecutará el código en él, pero no ejecutará la alerta dentro del elemento script en absoluto.
Sin embargo, los beneficios de desarrollo de esto se ven disminuidos por el efecto que esto tiene en el rendimiento de su documento. Esto difiere ligeramente de un navegador a otro, pero el peor de los casos (que lamentablemente sigue siendo el segundo navegador más utilizado) hace lo siguiente:
Una forma de evitarlo es utilizar un script de backend para crear un único archivo a partir de todos los archivos que utilices. De este modo, se obtiene la ventaja de mantener un mantenimiento sencillo y, al mismo tiempo, se reducen los retrasos en la visualización de la página web. Hay varios scripts como este en la web – uno de ellos está escrito en PHP y disponible en Ed Eliot.
Los inconvenientes son que sus scripts retrasan la visualización del documento y que el script no tiene acceso al HTML del documento. Por lo tanto, es necesario retrasar la ejecución de cualquier script que cambie el HTML del documento hasta que éste haya terminado de cargarse. Esto puede hacerse con un manejador onload o una de las varias soluciones DOMready o contentAvailable que hay en la web – ninguna de las cuales es a prueba de balas y la mayoría de las cuales dependen de hacks específicos del navegador.