数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何检测 'IMG' 元素加载是否已开始以及/或是否已向服务器发送请求？
有时在 HTML 网站中插入图像时，图像可能无法加载，原因如下：
图像 URL 错误
网络问题
我们要执行的任务是检测 img 元素加载是否已开始以及/或是否已向服务器发送请求。在此之前，让我们快速了解一下 HTML <img> 标签。
HTML <img> 标签
要将图像插入网页，请使用 HTML 标签。在现代网站中，图像使用 <img> 元素链接到网页，该元素包含图像的空间。这可以防止网站直接将图像添加到网页中。
语法
以下是 <img> 标签的语法
<img src="" alt="" width="" height="">
让我们来看下面的例子，以便更好地理解如何检测图像是否已加载以及/或是否已向服务器发送请求。
示例
在下面的示例中，我们创建一个简单的表单来检查图像是否已加载或是否已向服务器发送请求。
<!DOCTYPE html>
<html>
<head>
<title>detecting image load</title>
</head>
<body>
<h1>case1</h1>
<img src= "https://tutorialspoint.com/images/logo.png"
onload="javascript: alert('image loaded')"
onerror="javascript: alert('image failed to load')" />
<h2>case2</h2>
<img src="#" onload="javascript: alert('Image Loaded')"
onerror="javascript: alert('Failed to load the image')" />
</body>
</html>
当脚本执行时，它将生成一个输出，显示一个警报，表明图像已加载并在网页上显示图像。在第二种情况下，它将显示一个警报，表明图像加载失败并显示默认的损坏图像。
示例
考虑以下示例，我们在 HTML 中使用 image-complete 属性，该属性返回一个布尔值：如果图像已加载，则显示 true；否则，显示 false。
<!DOCTYPE html>
<html>
<head>
<title>detecting imagr load</title>
</head>
<body>
<img src=
"https://tutorialspoint.com/java/images/java-mini-logo.jpg">
<script>
window.addEventListener("load", event => {
var image = document.querySelector('img');
var load = image.complete;
alert(load);
});
</script>
</body>
</html>
运行以上脚本后，输出窗口将弹出显示警报“true”并在网页上显示图像。
更新于: 2023年4月20日
292 次查看
广告