En JavaScript, el evento onload se usa para verificar si una ventana está cargada o no. De manera similar, podemos usar ese evento para verificar si un elemento en particular se ha cargado o no. Hay dos formas en las que podemos comprobar si una imagen de fondo se ha cargado o no.
Sintaxis:
-
Usando HTML:
<element onload="myScript">
-
Usando el atributo onload en JavaScript:
object.onload = function(){myScript}; -
Usando el método addEventListener() en JavaScript
object.addEventListener("load", myScript);
Enfoque HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<style>
#bg_img {
width: 50vw;
height: 50vh;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Default code has been
loaded into the Editor.
</p>
<img id="bg_img" onload="loadImage()" />
<p id="img_status"></p>
<script>
function loadImage() {
document.getElementById("img_status")
.innerHTML = "image loaded";
}
document.getElementById("bg_img").src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
let ele = document.getElementById("bg_img");
</script>
</body>
</html>
Producción:
Usando el atributo onload :
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<style>
#bg_img {
width: 50vw;
height: 50vh;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Default code has been
loaded into the Editor.
</p>
<img id="bg_img" />
<p id="img_status"></p>
<script>
let ele = document.getElementById("bg_img");
ele.onload = (e) => {
document.getElementById("img_status")
.innerHTML = "image loaded";
};
ele.src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
</script>
</body>
</html>
Producción:
Usando el método addEventListener():
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#bg_img {
width: 50vw;
height: 50vh;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
Default code has been
loaded into the editor
</p>
<img id="bg_img" />
<p id="img_status"></p>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script>
let ele = document.getElementById("bg_img");
ele.addEventListener("load", (e) => {
document.getElementById("img_status")
.innerHTML = "image loaded";
});
ele.src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
</script>
</body>
</html>
Producción:
Nota: Para usar jQuery, reemplace el código del detector de eventos con lo siguiente:
$("#bg_img").on("load", function () {
window.alert("Image has loaded", 1);
});
Publicación traducida automáticamente
Artículo escrito por Ganeshchowdharysadanala y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA