极客教程如何使用JavaScript检查背景图像是否加载
在本文中，我们将使用JavaScript检查背景图像是否加载。在JavaScript中，使用 onload 事件来检查窗口是否加载。同样，我们可以使用该事件来检查特定元素是否加载。有两种方式可以检查背景图像是否加载。
我们可以通过三种方式实现这一点：
- 使用HTML
- 使用JavaScript中的 onload 属性
- 使用 addEventListener() 方法
使用HTML：
语法：
<element onload="myScript">
示例： 此示例使用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>
输出：
使用JavaScript中的 onload 属性：
语法：
object.onload = function(){myScript};
示例： 此示例使用JavaScript中的onload属性检查背景图像是否加载。
<!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";
输出：
使用addEventListener()方法在JavaScript中：
语法：
object.addEventListener("load", myScript);
示例： 此示例使用JavaScript中的addEventListener()方法来检查背景图是否已加载。
<!DOCTYPE html>
<html>
<head>
<style>
#bg_img {
width: 50vw;
height: 50vh;
}
</style>
</head>
<body>
<h2>欢迎来到GFG</h2>
<p>
默认代码已加载到编辑器中
</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 = "图像已加载";
});
ele.src =
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-6.png";
</script>
</body>
</html>
输出：
注意： 要使用jQuery，请使用以下代码替换事件监听器代码-
$("#bg_img").on("load", function () {
window.alert("图片已加载", 1);
});
阅读更多：JavaScript 教程