如何在Fabric.js中創建圖片加載動畫？

Question

IM加載圖像到我Fabric.js帆布使用Image.fromURL像這樣：

fabric.Image.fromURL(url, function(img) { 
    //blah blah blah 
    canvas.add(img).setActiveObject(img); 
}); 

它的工作原理，但有些圖像需要幾秒鐘的加載，並且用戶有沒有反饋坐在那裏。我想放入一個加載動畫，但無法找到任何事件我可以用來告訴我什麼時候圖像加載完成並準備顯示。

任何人都有解決方案？謝謝！

Answer 1

這應該這樣做：

function createCanvasImage(callback) { 
    //Placeholder-Code to set the loading-image spinning 

    //Now load the image with AJAX 
    var sauce = "http://..." 
    var request = $.ajax({ 
    url: sauce, 
    crossDomain: true, 
    type: "HEAD", 
    cache: true, 
    }); 

    //If AJAX loaded your image, the browser will have it in cache, 
    //so now we can add it 
    request.done(function() { 
    fabric.Image.fromURL(sauce, function(img) { 
      //blah blah blah 
     canvas.add(img).setActiveObject(img); 
    }); 

    //Placeholder-Code to stop the loading-image 
    callback(); 
    }); 
} 

createCanvasImage(alert.bind(undefined, "Image loading done!"));