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

【问题标题】：how to create an image loading animation in Fabric.js?如何在 Fabric.js 中创建图像加载动画？
【发布时间】：2015-10-10 09:59:32
【问题描述】：

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

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

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

谁有解决方案？谢谢！

【问题讨论】：

标签： javascript image events fabricjs

【解决方案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!"));

【讨论】：