資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何檢查影像是否已載入？
概述
為了執行某些操作，可以使用 JavaScript 檢查影像是否已載入。在很多情況下，由於影像尺寸過大或網路連線不佳，瀏覽器無法載入影像。因此，我們的影像有時可能會顯示某些錯誤。因此，為了知道我們的影像是否已載入，我們有一些方法，例如 onload()、onerror() 和 complete 屬性。
語法
解決此問題的語法如下：
onload="function()" - 當影像成功載入時，將呼叫此函式。在此，傳遞任何回撥函式以執行特定操作。
onerror="function()" - 當影像由於任何原因在載入過程中遇到問題時，此函式將觸發。
selector.complete - selector.complete 方法使用類名、ID 或標籤名稱選擇影像，然後檢查影像是否已完全載入。
要檢查已載入的影像，我們有兩種方法
方法 1 - 在這種方法中，我們將使用兩種方法 onload() 和 onerror()。在這兩種方法中，將傳遞一個函式作為引數，該函式將在瀏覽器載入時被呼叫，並檢查影像是否已載入。
演算法
步驟 1 - 在 HTML 中建立一個影像標籤，並在 src 屬性中插入影像的連結或路徑 <image src= “在此處放置您的連結”/>。
步驟 2 - 訪問影像標籤並將其儲存在變數中。
步驟 3 - 在 addEventListener() 中使用 load() 方法和 error() 方法。
步驟 4 - 如果在瀏覽器載入時影像成功載入，則 load 事件將觸發並返回特定操作，否則如果影像無法載入，則 error 事件將觸發。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check whether image is loaded or not</title>
<style>
body{
min-height: 90vh;
display: flex;
flex-direction: column;
place-content: center;
background-color: #0a0a0a;
color: white;
text-align: center;
}
img{
width: 50%;
height: 70%;
border-radius: 8px;
margin: auto auto ;
box-shadow: 0 0 8px white;
}
</style>
</head>
<body>
<img src= "https://tutorialspoint.tw/images/logo.png" id="sample" onload="checkLoad()" onerror="checkError()" alt="error">
<h2 id="output"></h2>
<script>
document.getElementById("sample").addEventListener("load", () => {
document.getElementById("output").innerText="Image Loaded Sucessfully";
})
document.getElementById("sample").addEventListener("error", () => {
document.getElementById("output").innerText="Error occured while loading image!";
})
</script>
</body>
</html>
在網頁瀏覽器上載入影像時沒有錯誤。因此，在示例中，addEventListener() 中的 load() 方法將觸發輸出“影像已成功載入”。
方法 2 - 在這種方法中，我們呼叫影像物件的 complete() 方法，該方法檢查影像是否已完全載入，並據此返回 true 或 false。當影像在載入過程中遇到任何問題時，它將返回 false，否則返回 true。
演算法
步驟 1 - 在 HTML 中建立一個影像標籤，並在 src 屬性中插入影像的連結或路徑 <image src= “在此處放置您的連結”/>。
步驟 2 - 訪問影像標籤並將其儲存在變數中。
步驟 3 - 使用影像物件的 complete() 方法。如果影像已在瀏覽器中載入，它將在瀏覽器上提醒 true，否則它將在瀏覽器上提醒 false。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check whether image is loaded or not</title>
<style>
body{
min-height: 90vh;
display: flex;
flex-direction: column;
place-content: center;
background-color: #0a0a0a;
color: white;
text-align: center;
}
img{
width: 50%;
height: 70%;
border-radius: 8px;
margin: auto auto ;
box-shadow: 0 0 8px white;
}
</style>
</head>
<body>
<img src= "https://tutorialspoint.tw/images/logo.png" id="sample" onload="checkLoad()" onerror="checkError()" alt="error">
<h2 id="output"></h2>
<script>
var i = document.getElementById("sample");
var load = i.complete;
alert(load);
</script>
</body>
</html>
以上程式碼顯示了 complete() 方法返回 true 的輸出。
結論
complete() 方法的返回型別是布林值，因為它根據當前情況返回 true 或 false。在某些情況下影像無法載入，例如影像的 URL 錯誤、網路連線不良、影像不存在於指定目錄中。以上解決方案在許多情況下都很有幫助，因為它在影像完全載入時觸發特定操作。JavaScript 中的影像物件包含許多有助於在 DOM 中操作影像的方法。
11K+ 瀏覽量
