La tarea es saber si una imagen se carga utilizando un método de devolución de llamada de JavaScript. Consulte las devoluciones de llamada de JavaScript.
Método 1: mediante el uso de la propiedad .complete .
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create a JavaScript callback for
knowing if an image is loaded
</title>
<style>
#sologo {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
alt="Loading Image" id="sologo" />
<script type="text/javascript">
let img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function () {
alert('error')
})
}
</script>
</body>
</html>
Producción:
Nota: este programa verificará continuamente si la imagen se carga utilizando la propiedad .complete del elemento img . También comprobará si hay errores. Cuando se cargue la imagen, se alertará con el cuadro de mensaje de alerta «cargado».
Método 2: Usar el método image.onload()
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create a JavaScript callback for
knowing if an image is loaded
</title>
<style>
#sologo {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<img src="#" alt="Loading Image" id="sologo" />
<script type="text/javascript">
window.onload = function () {
let logo = document.getElementById('sologo');
logo.onload = function () {
alert("loaded");
};
setTimeout(function () {
logo.src =
'https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png';
}, 5000);
};
</script>
</body>
</html>
Producción:
Nota: en este método, Image.onload() verifica continuamente si la imagen está cargada o no. Si la imagen no se carga en 5 segundos, se agotará el tiempo de espera y le mostrará un error. Si la imagen se carga después de un tiempo determinado, envía un mensaje de alerta que dice «La imagen se ha cargado».
Publicación traducida automáticamente
Artículo escrito por sibasish_14 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA