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图像加载事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于javascript类数组的深入理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了js事件处理程序跨浏览器解决方案，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了对Web开发中前端框架与前端类库的一些思考,本文讲解了前端框架的理解误区、前端框架与前端类库的区别、前端MVC框架思想等内容,需要的朋友可以参考下2015-03-03
本文给大家讲述的是个人在一个项目中遇到的关于jsonp的post跨域问题的解决过程，这里记录下来，分项给大家。2015-07-07
这篇文章主要为大家详细介绍了JS实现简单加减购物车效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
window.event.keyCode兼容IE和Firefox实现js代码
window.event.keyCode兼容IE和Firefox具体实现代码如下，感兴趣的朋友可以参考下哈2013-05-05
本文主要对JavaScript闭包进行详细介绍。相信对零基础学习闭包的朋友们会有很好的帮助，下面跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了JS简单实现父子窗口传值功能,结合具体实例形式分析了javascript实现不使用iframe框架进行窗口之间简单传值的相关操作技巧,需要的朋友可以参考下2017-09-09
本文介绍一个简单可行的办法，来做基于gulp构建的中小型项目中的seajs合并压缩，感兴趣的朋友一起看看详情吧2016-06-06
本文中，我将会通过类数组对象（array like object），探索javascript中的length属性的一些秘密。2011-07-07
最新评论