如何等待所有圖像從loadfromjson加載到fabric js中的畫布？

Question

當所有圖像都加載到畫布上時，我想隱藏加載器。 目前，發生的事情不是等待加載到畫布上的圖像。 幫助表示贊賞。

loader.show();
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
   loader.hide();
});

Answer 1

從文檔中你可以讀到第三個函數被調用

在創建每個結構對象之后。

所以它會在加載第一個圖像時隱藏加載器。

您可以在function(o, object)的主體內使用 counter 並檢查計數器是否達到了要顯示的預期圖像數量，然后隱藏加載程序。

Answer 2

該方法支持回調，您正在使用canvas.renderAll.bind(canvas)而不是調用該函數調用您自己的函數來呈現和隱藏​​加載程序。

loader.show();
canvas.loadFromJSON(json, function() {
   canvas.renderAll();
   loader.hide();
});

第三個函數僅用於在初始化后處理每個對象，並為每個對象調用一次。

Answer 3

您需要使用 Promise.all()，例如：

function loadImg(json){
   return new Promise((resolve,reject)=>{
      canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
         resolve();
      })
   });
}

然后：

loader.show();
Promise.all(jsonArr.map(loadImg)).then(loader.hide);

由於有些歧義，我無法給你一個明確的答案，但應該沿着這條線。