影像加載事件可以是同步的，還是總是異步的？-有解無憂

假設我有以下代碼：

let img = document.createElement("img");
img.addEventListener("load", function() {
    alert("Loaded!");
});
img.src = external_string; // Can "load" fire here?

問題是 - 如果影像中的影像external_string已經在瀏覽器快取中，或者可能是 base64 編碼，或者其他 - 是否會發生在分配load的同一行立即呼叫事件？src

load注意：我實際上希望它是異步的，因為我想在事件被觸發之前設定更多的東西。但是，如果它有可能被同步觸發，那么我需要投入額外的作業來推遲它。

我在任何檔案中都找不到這種微妙的解釋，但實際測驗總是異步呼叫事件。

uj5u.com熱心網友回復：

您可以使用decode()方法等待影像準備好。即使影像立即加載，對承諾微任務進行排隊也將始終確保代碼在承諾解決后運行

Promise 處理程式.then//始終是異步的.catch。.finally

即使立即解決了 Promise，下面 .then幾行中的代碼/ .catch/.finally仍將在這些處理程式之前執行。

// Base64 data URI requires no loading time
const red_dot = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

const img = document.createElement("img");
img.src = red_dot;
img.decode().then(() => {
  console.log("img ready, this will log second");
  document.body.append(img);
});
console.log("img loading, this will log first");

請記住，您不能decode()在設定之前呼叫src。

加載事件也將始終觸發，并且可以隨時添加偵聽器，但是由于它依賴于事件回圈，因此對操作順序的控制是不確定的。話雖如此，您在設定之后添加的任何程式代碼都src將始終在事件處理程式觸發之前執行。

// Base64 data URI requires no loading time
const red_dot = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

const img = document.createElement("img");
img.addEventListener("load", () => {
  console.log("img ready, this will log second");
  document.body.append(img);
});
img.src = red_dot;
console.log("img loading, this will log first");

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522743.html

標籤：javascriptdom

上一篇：組件隱藏

下一篇：如何使用JavaScript和CSS轉換屬性使物件在每次按下任何鍵盤按鈕時移動20像素并滾動180度？