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.