En JavaScript, este evento puede aplicarse para iniciar una función en particular cuando la página se muestra por completo. También se puede utilizar para verificar el tipo y la versión del navegador del visitante. Podemos comprobar qué cookies utiliza una página utilizando el onload atributo.

En HTML, el atributo onload se activa cuando se carga un objeto. El propósito de este atributo es ejecutar un script cuando se carga el elemento asociado.

En HTML, el onload El atributo se usa generalmente con el elemento para ejecutar un script una vez que el contenido (incluidos archivos CSS, imágenes, scripts, etc.) de la página web esté completamente cargado. No es necesario usarlo solo con la etiqueta

, ya que se puede usar con otros elementos HTML.

La diferencia entre document.onload y window.onload es: document.onload se activa antes de la carga de imágenes y otro contenido externo. Se dispara antes del window.onload. Mientras que la window.onload se activa cuando se carga toda la página, incluidos archivos CSS, archivos de script, imágenes, etc.

Sintaxis

window.onload = diversión ()<br>

Entendamos este evento usando algunos ejemplos.

Ejemplo 1

En este ejemplo, hay un elemento div con una altura de 200px y un ancho de 200px. Aquí, estamos usando el window.onload () para cambiar el color de fondo, el ancho y la altura del div elemento después de cargar la página web.

El color de fondo se establece en ‘rojo’, y el ancho y el alto se establecen en 300 px cada.

<meta charset="utf-8"> <title> window.onload () </title>

Este es un ejemplo de window.onload ()

Pruébelo ahora

Producción

Después de la ejecución del código y la carga de la página, el resultado será:

Ejemplo 2

En este ejemplo, estamos implementando una animación simple usando las propiedades del objeto DOM y funciones de javascript. Usamos la función de JavaScript getElementById () para obtener el objeto DOM y luego asignamos ese objeto a una variable global.

<script type = "text / javascript"> var img = null; función init () {img = document.getElementById ('myimg'); img.style.position = 'relativo'; img.style.left = "50px"; } función moveRight () {img.style.left = parseInt (img.style.left) + 100 + 'px'; } window.onload = init; </script>

Haga clic en el botón de abajo para mover la imagen a la derecha

Pruébelo ahora

Producción

Después de la ejecución exitosa del código anterior, la salida será:

Ahora, hay un ejemplo en el que usaremos el HTML onload atributo y las funciones de JavaScript.

Ejemplo 3

Es un ejemplo simple del uso de HTML. onload atributo con la función definida en JavaScript. En este ejemplo, el alerta() se llama a la función cada vez que se actualiza el documento.

Ejemplo del atributo de carga HTML

Intente actualizar el documento para ver el efecto.

Pruébelo ahora

Producción

Después de la ejecución del código anterior, la salida será:

---