資料結構
網路
關係資料庫管理系統
作業系統
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.tw/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.tw/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 次檢視
廣告