首頁 > web前端 > js教程 > JavaScript 如何在圖片載入後執行回呼函數?

JavaScript 如何在圖片載入後執行回呼函數?

DDD
發布: 2024-11-28 09:39:10
原創
248 人瀏覽過

How Can I Execute a Callback Function After an Image Loads in JavaScript?

使用回調處理影像載入的替代方法

載入映像時,了解影像何時完成對於實現特定功能至關重要。本問題探討了在 JavaScript 中載入映像時執行回呼的選項。

解 1:.complete 回呼

可靠且符合標準的方法涉及使用 .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');
  });
}
登入後複製

此程式碼:

  1. 使用 img 初始化影像元素。
  2. 定義載入的回呼函數來處理映像載入。
  3. 檢查影像是否已完成使用 .complete。
  4. 如果完成,則立即呼叫回調。
  5. 如果未完成,則附加「load」(在載入時執行回呼)和「error」(以通知載入失敗)。

其他備註

這種方法效率很高,因為它會在影像準備好後立即觸發回調,避免事件監聽器等待造成不必要的延遲。它也受到主要瀏覽器的支持,並允許輕鬆處理錯誤。

以上是JavaScript 如何在圖片載入後執行回呼函數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板