Carga de JavaScript

Resumen: en este tutorial, aprenderá cómo manejar el evento de carga que se activa en el documento, la imagen y los elementos del script en JavaScript.

El evento de carga de la ventana

Para el objeto window, el evento load se activa cuando el toda la página web (HTML) se cargó por completo, incluidos todos los recursos dependientes, como archivos JavaScript, archivos CSS e imágenes.

Para manejar el evento load, debe registrarse un detector de eventos usando el método addEventListener():

Code language: JavaScript (javascript)

O usando el onload propiedad del objeto window:

Code language: JavaScript (javascript)

Si mantiene un sistema heredado, puede encontrar que el load controlador de eventos está registrado en el elemento del cuerpo del documento HTML, así:

Es una buena práctica utilizar el addEventListener() para asignar el onload controlador de eventos siempre que sea posible.

El evento de carga de la imagen

El load también ocurre en imágenes. Para manejar el evento load en las imágenes, puede usar el método addEventListener() de los elementos de la imagen.

El El siguiente ejemplo utiliza el controlador de eventos load para determinar si una imagen, que existe en el árbol DOM, se ha cargado por completo:

Puede asignar un onload controlador de eventos directamente usando el atributo onload del elemento <img>, como este:

Code language: HTML, XML (xml)

Si crea un elemento de imagen de forma dinámica, puede asignar un onload controlador de eventos antes de configurar el src propiedad de la siguiente manera:

Cómo funciona:

• Primero, cree un elemento de imagen después de que el documento se haya cargado completamente colocando el código dentro del controlador de eventos del evento de carga de la ventana.
• En segundo lugar, luego asigne el controlador de eventos onload a la imagen.
• En tercer lugar, agregue la imagen al documento.
• Finalmente, asigne una URL de imagen al atributo src. La imagen se descargará al elemento tan pronto como se establezca la propiedad src.

El evento de carga del script

El <script> también admite el evento load ligeramente diferente de las formas estándar.

El evento load del script le permite para comprobar si un archivo JavaScript se ha cargado por completo.

A diferencia de las imágenes, el navegador web comienza a descargar archivos JavaScript solo después de que se haya asignado la propiedad src y la <script> se ha agregado el elemento al documento.

El siguiente código carga el archivo app.js después de que la página ha sido completamente cargado. Asigna un onload controlador de eventos para verificar si el app.js se ha cargado completamente.

Resumen