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" rel="external nofollow" rel="external nofollow" />
</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" rel="external nofollow" rel="external nofollow" />
</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>如果我们运行代码，它会显示图像加载成功的警告消息。
到此这篇关于javascript 中的图像加载事件的文章就介绍到这了,更多相关js图像加载事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！