Javascript 如何在Fabric.js中创建图像加载动画？

我正在使用Image.fromURL将图像加载到my Fabric.js画布中，如下所示：

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

它可以工作，但是一些图像需要几秒钟才能加载，用户必须坐在那里没有反馈。我想在加载动画，但我找不到任何事件，我可以用来告诉我，当图像完成加载和准备显示

有人有办法吗？谢谢

这应该可以：

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!"));

这应该做到：

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!"));