In JavaScript, onload event is used to check whether a window is loaded or not. Similarly, we can use that event to check whether a particular element has loaded or not. There are two ways in which we can check whether a background image has loaded or not.
Syntax:
-
Using HTML:
<element onload="myScript">
-
Using onload attribute in JavaScript:
object.onload = function(){myScript};
-
Using addEventListener() method in JavaScript
object.addEventListener("load", myScript);
HTML approach:
HTML
<!DOCTYPE html> < html > < head > < script src = </ 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 = let ele = document.getElementById("bg_img"); </ script > </ body > </ html > |
Output:
Using onload attribute:
HTML
<!DOCTYPE html> < html > < head > < script src = </ 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 = </ script > </ body > </ html > |
Output:
Using addEventListener() method:
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 = </ script > < script > let ele = document.getElementById("bg_img"); ele.addEventListener("load", (e) => { document.getElementById("img_status") .innerHTML = "image loaded"; }); ele.src = </ script > </ body > </ html > |
Output:
Note: To use jQuery replace event listener code with the following –
$("#bg_img").on("load", function () { window.alert("Image has loaded", 1); });