如何在 JavaScript 中實作回調來處理圖像載入事件？

實現影像載入事件的回呼

在Web 應用程式中處理影像時，了解影像何時完成載入對於某些功能至關重要。實現此目的的有效方法是使用回調。在本文中，我們將探討如何在映像載入完成後立即執行 JavaScript 回呼。

將 .complete 與回調結合使用

對於符合標準的方法無需額外的依賴項，您可以使用 .complete 屬性以及回調函數。此技術可確保您等待映像載入的時間不會超過所需時間：

var img = document.querySelector('img');

function loaded() {
  alert('loaded');
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
  img.addEventListener('error', function() {
    alert('error');
  });
}

此程式碼片段首先透過檢查其 .complete 屬性來檢查映像是否已載入。如果為 true，則立即呼叫 returned() 回呼。如果為 false，事件偵聽器將附加到 load 和 error 事件，分別處理回呼和錯誤處理。

此方法是可靠的，可確保影像完全載入後立即執行回調，減少不必要的等待時間。

以上是如何在 JavaScript 中實作回調來處理圖像載入事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！