JavaScript 中的图像加载事件
本文将讨论如何在 JavaScript 中处理 .onload 事件。 我们将学习如何在上传图像后使用 JavaScript 创建警告框。
我们还将了解如何通过创建警告框使用 JavaScript 检查图像是否已加载。
JavaScript 中的 .onload 事件
.onload 事件仅在加载对象时发生。 .onload 事件主要用在元素主体中，一旦网页加载了所有内容（包括图像、脚本、CSS 文件等），就会执行脚本。
使用的浏览器将允许我们跟踪外部资源（如图像、脚本、iframe 等）的加载。当我们上传图像时，如果它保存在浏览器缓存中，则会触发 onload 事件。
我们如何创建一个警告框，无论图像是否被缓存，它都会在加载图像时显示？
我们需要创建一个警告框，当 onload 事件在图像上触发时，它将显示一条消息，说明图像已成功加载。 我们可以使用 JavaScript 和 HTML 来解决这个问题。
JavaScript 中的 image.onload 事件
使用 JavaScript，我们可以检查图像是否已完全加载。 我们将使用 HTMLimageElement 接口的 complete 属性。
当图像已完全上传时，此属性返回 true，否则返回 false。 我们在 JavaScript 中有 naturalWidth 和 naturalHeight 属性，我们可以使用其中任何一个。
我们在示例代码中使用了 .naturalWidth ，如果图像加载成功则返回 true，否则返回 0。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Onload event using Javascript</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using Javascript</h1>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar">
</body>
</html>
JavaScript 代码:
window.addEventListener("load", event => {
var image = document.querySelector('img');
var isLoadedSuccessfully = image.complete && image.naturalWidth !== 0;
alert(isLoadedSuccessfully);
});
如果我们运行这段代码，它会返回 true，这意味着图像加载成功。
HTML 中的 image.onload 事件
如果我们不想使用 JavaScript，我们可以使用 HTML 属性来检查图像是否已加载。 在 HTML 中，我们可以使用 onload 和 onerror 属性。
在 HTML 中，onload 属性在图像加载成功时触发，而 onerror 属性在加载图像时发生错误时触发。
我们在以下代码中使用了 onload 和 onerror 属性。 因此，在这些属性的帮助下，我们可以创建一个警告框，在加载图像时显示一条消息，说明图像已成功加载。
如果在加载图像时发生错误，它将显示一条消息，指出图像未加载。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Onload event using HTML</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Onload event using HTML </h1>
<p id="currentTime"></p>
<script src="script.js"></script>
<img src="https://secure.gravatar.com/avatar?d=wavatar"
onload="javascript: alert('The image is loaded successfully')"
onerror="javascript: alert('Image is not loaded')" />
</body>
</html>
如果我们运行代码，它会显示图像加载成功的警告消息。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
