Al insertar imágenes en páginas HTML, a veces la imagen puede no cargarse debido a:
- Obtener la URL de la imagen incorrecta
- mala conexión a internet
Por lo tanto, es posible que deseemos verificar si la imagen no se carga debido a estos motivos. Para verificar podemos usar los siguientes métodos
Método 1:
Usar atributos de <img> para verificar si una imagen está cargada o no. Los atributos que usaremos son:
- onload: el evento onload se activa cuando se carga una imagen y se ejecuta
- onerror: el evento onerror se activa si se produce un error durante la ejecución
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Image load check</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png"
onload=
"javascript: alert('The image has been loaded')"
onerror=
"javascript: alert('The image has failed to load')" />
</body>
</html>
Producción:
cuando la imagen se carga con éxito
cuando falla la carga de la imagen
Método 2:
Usando la propiedad de imagen completa en HTML DOM
Esta propiedad devuelve un valor booleano si la imagen está cargada, devuelve verdadero, de lo contrario, devuelve falso
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Checking if image is loaded</title>
</head>
<script type="text/javascript">
window.addEventListener("load", event => {
var image = document.querySelector('img');
var load = image.complete;
alert(load);
});
</script>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png">
</body>
</html>
Aquí la carga variable comprueba si la imagen está cargada o no. Si se carga una imagen, se alerta verdadero; de lo contrario, se alerta falso.
Producción:
cuando la imagen se carga con éxito
cuando falla la carga de la imagen
Navegadores compatibles:
- Google Chrome
- Firefox
- explorador de Internet
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA