本文将讨论我们如何.onload
在 JavaScript 中处理事件。我们将学习如何在上传图片后使用 JavaScript 创建一个警告框。
我们还将了解如何通过创建警报框来检查是否使用 JavaScript 加载了图像。
目录
1. .onload JavaScript中的事件
该
.onload
事件仅在加载对象时发生。该.onload
事件主要用于在元素主体内执行脚本,一旦网页加载了所有内容,包括图像、脚本、CSS 文件等。使用的浏览器将允许我们跟踪外部资源的加载,例如图像、脚本、iframe 等。当我们上传图像时,如果它保存在浏览器缓存中,
onload
则会触发该事件。我们如何创建一个在加载图像时显示的警报框,而不管图像是否被缓存?
我们需要创建一个警报框,该框将显示一条消息,说明事件
The image is loaded successfully
何时在图像上触发。onload
我们可以使用 JavaScript 和 HTML 来解决这个问题。
2.image.onload JavaScript中的事件
使用 JavaScript,我们可以检查图像是否已完全加载。我们将使用
HTMLimageElement
接口的完整属性。此属性
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
,这意味着图像已成功加载。
2.image.onload HTML中的事件
如果我们不想使用 JavaScript,我们可以使用 HTML 属性来检查图像是否已加载。在 HTML 中,我们可以使用
onload
和onerror
属性。在 HTML 中,
onload
图像加载成功时onerror
触发该属性,而加载图像时发生错误则触发该属性。我们在下面的代码中使用了
onload
和属性。onerror
因此,借助这些属性,我们可以创建一个警告框,该框将显示一条消息,说明The image is loaded successfully
图像何时加载。如果加载图像时发生错误,它将显示一条消息,内容为
the image is not loaded
。
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>
如果我们运行代码,它将显示一条警告消息,即The image is loaded successfully
.