資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何建立 JavaScript 回撥函式來判斷影像是否載入完成？
像 JavaScript 這樣的強大程式語言經常用於構建互動式、動態網頁。在網站上載入影像就是 JavaScript 最流行的用途之一。但是，載入影像可能具有挑戰性，尤其是在確定載入是否完成時。在本文中，我們將介紹如何建立一個 JavaScript 回撥函式，用於檢測影像是否已載入。
什麼是回撥函式？
回撥函式是在初始函式執行完成後被呼叫的函式，它作為引數傳遞給另一個函式。換句話說，回撥函式是在另一個函式完成執行後執行的函式。這是 JavaScript 的一個強大功能，它允許建立更復雜和動態的網頁。
為什麼要使用回撥函式來載入影像？
當您將影像上傳到網站時，瀏覽器會在 HTML 程式碼中找到元素的那一刻開始載入影像。當瀏覽器到達 HTML 程式碼末尾時，影像可能尚未載入完成。如果您在影像載入完成之前嘗試訪問它，這可能會導致問題。例如，如果您在影像載入完成之前嘗試獲取影像的寬度和高度，您可能會得到不準確的結果。
為了解決這個問題，可以使用在影像載入完成後執行的回撥函式。透過這樣做，您可以確保影像完全載入後再嘗試訪問其屬性。
如何建立影像載入的回撥函式？
有幾種方法可以建立影像載入的回撥函式。
使用 `![]()
` 標籤的 onload 事件
使用 `` 標籤的 onload 事件是最常用的方法。當影像完全載入時，會觸發 onload 事件。您可以透過將 `
` 標籤的 onload 屬性設定為回撥函式的名稱來將回調函式附加到此事件。
例如，假設您想建立一個顯示影像寬度和高度的回撥函式，並且您有一個 id 為 "myImage" 的 `` 元素。
示例
可以使用以下程式碼來實現此目的：
<html>
<body>
<div id="width-display"></div>
<div id="height-display"></div>
<div id= "info"></div>
<img id="myImage" onload="imageLoaded()" src="https://picsum.photos/600/400" />
<div id="data-display"></div>
<div id="error-display"></div>
<script>
function imageLoaded() {
var img = document.getElementById("myImage");
var widthDisplay = document.getElementById("width-display");
widthDisplay.innerHTML = "Width: " + img.width;
var heightDisplay = document.getElementById("height-display");
heightDisplay.innerHTML = "Height: " + img.height;
document.getElementById("info").innerHTML = "Image is loaded successfully.";
}
</script>
</body>
</html>
每次重新整理頁面時，影像都會不同。
在這個例子中，imageLoaded() 函式附加到 `` 標籤的 onload 事件。當影像完全載入時，該函式將被執行，並顯示影像的寬度和高度。
使用 addEventListener 方法
addEventListener 方法也可以用來建立影像載入的回撥函式。使用此方法，您可以指定在觸發事件時使用的回撥函式，並將事件監聽器附加到元素。此方法可用於將事件監聽器新增到 `` 標籤的 "load" 事件。
示例
使用 addEventListener 方法，您可以編寫以下程式碼來建立影像載入的回撥函式：
<html>
<body>
<img id="myImage" src="https://picsum.photos/200/300" />
<p id="width-display"></p>
<p id="height-display"></p>
<div id= "info"></div>
<script type="text/javascript">
var img = document.getElementById("myImage");
img.addEventListener("load", function(){
var widthDisplay = document.getElementById("width-display");
widthDisplay.innerHTML = "Width: " + img.width;
var heightDisplay = document.getElementById("height-display");
heightDisplay.innerHTML = "Height: " + img.height;
document.getElementById("info").innerHTML = "Image is loaded successfully.";
});
</script>
</body>
</html>
在這個例子中，addEventListener 方法用於將 imageLoaded 函式附加到 `` 標籤的 "load" 事件。當影像完全載入時，該函式將被執行，並顯示影像的寬度和高度。
使用 setTimeout 函式
onload 事件和 addEventListener 函式是建立影像載入回撥函式最常用的兩種方法。但是，還有其他幾種方法可以實現這一點。
示例
例如，您可以在預定時間後使用 setTimeout 方法檢查影像是否已載入。
<html>
<head>
<script>
function checkImageLoaded() {
var img = document.getElementById("myImage");
if (img.complete) {
document.getElementById("width").innerHTML = "Width: " + img.width;
document.getElementById("height").innerHTML = "Height: " + img.height;
document.getElementById("info").innerHTML = "Image is loaded successfully.";
} else {
setTimeout(checkImageLoaded, 50);
}
}
</script>
</head>
<body>
<img id="myImage" onload="checkImageLoaded()" src="https://picsum.photos/100/100" />
<p id="width"></p>
<p id="height"></p>
<p id="info"></p>
</body>
</html>
此示例每 50 毫秒重複呼叫 checkImageLoaded 方法，直到影像完全載入。
在本教程中，我們介紹了使用回撥函式載入影像的價值以及幾種建立回撥函式的方法。按照這些說明，您可以快速建立一個影像載入的回撥函式，這也可以確保您的影像在訪問之前完全載入。
2K+ 次瀏覽
