Evento de carga de imagen en JavaScript
Este artículo discutirá cómo podemos manejar el evento .onload en JavaScript. Aprenderemos cómo crear un cuadro de alerta usando JavaScript cuando se ha subido una imagen.
También descubriremos cómo podemos verificar si una imagen está cargada o no usando JavaScript creando un cuadro de alerta.
el evento .onload en JavaScript
El evento .onload ocurre solo cuando se ha cargado un objeto. El evento .onload se usa principalmente dentro del cuerpo del elemento para ejecutar un script una vez que una página web ha cargado todos los contenidos, incluidas imágenes, scripts, archivos CSS, etc.
Los navegadores utilizados nos permitirán realizar un seguimiento de la carga de recursos externos como imágenes, scripts, iframes, etc. Cuando subamos una imagen, y si está guardada en la caché del navegador, se disparará el evento onload.
¿Cómo podemos crear un cuadro de alerta que se muestre cuando se carga una imagen independientemente de si la imagen está en caché?
Necesitamos crear un cuadro de alerta que mostrará un mensaje que dice “La imagen se cargó correctamente” cuando el evento onload se activa en una imagen. Podemos abordar este problema usando JavaScript y HTML.
el evento image.onload en JavaScript
Usando JavaScript, podemos verificar si una imagen se ha cargado por completo o no. Usaremos el atributo completo de la interfaz HTMLimageElement.
Este atributo devuelve “true” cuando la imagen se ha cargado por completo y “false” en caso contrario. Tenemos las propiedades naturalWidth y naturalHeight en JavaScript, y podemos usar cualquiera de las dos.
Usamos .naturalWidth en el código de ejemplo, que devolverá true si la imagen se carga correctamente y devolverá 0 si no.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using Javascript</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using Javascript</h1>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar">
</body>
</html>
Código JavaScript:
window.addEventListener('load', event => {
var image = document.querySelector('img');
var isLoadedSuccessfully = image.complete && image.naturalWidth !== 0;
alert(isLoadedSuccessfully);
});
Si ejecutamos este código, devolverá true, lo que significa que la imagen se cargó correctamente.
Puede ver la demostración en vivo del código de ejemplo anterior haciendo clic aquí.
el evento image.onload en HTML
En caso de que no queramos usar JavaScript, podemos usar atributos HTML para comprobar si una imagen se ha cargado o no. En HTML, podemos usar los atributos onload y onerror.
En HTML, el atributo onload se activa cuando la imagen se carga correctamente, mientras que el atributo onerror se activa si ocurre un error al cargar una imagen.
Usamos los atributos onload y onerror en el siguiente código. Entonces, con la ayuda de estos atributos, podemos crear un cuadro de alerta que mostrará un mensaje que dice “La imagen se cargó correctamente” cuando se carga la imagen.
Si ocurre un error al cargar la imagen, mostrará un mensaje que dice la imagen no está cargada.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Onload event using HTML</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using HTML </h1>
<p id="currentTime"></p>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar"
onload="javascript: alert('The image is loaded successfully')"
onerror="javascript: alert('Image is not loaded')" />
</body>
</html>
Si ejecutamos el código, mostrará un mensaje de alerta de que La imagen se cargó correctamente.
Haga clic aquí para ver la demostración en vivo del código de ejemplo dado.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn