应用过滤器时显示加载屏幕

Question

对占据整个 canvas 的图像对象应用滤镜对于较大的图像可能需要几秒钟，我想在发生这种情况时显示加载屏幕，但 .show() 方法不可用' 直到应用过滤器后才触发。

当前应用过滤器的方法：

applyFilter: function (index, filter) {
    var obj = designer.baseImage,
        $loading = $('#loading-canvas');

    console.log('show loading');
    $loading.show();

    obj.filters[index] = filter;

    obj.applyFilters(function () {
        console.log('hide loading');
        $loading.hide();
        designer.canvas.renderAll();
    });
}

调用方法时（单击）'show loading' 会立即记录到控制台。加载 div 直到应用过滤器才会显示，此时加载屏幕闪烁，消失，并且 'hide loading' 被记录到控制台。为什么在 'show loading' 记录到控制台时不显示加载屏幕有什么想法吗？

编辑：加载屏幕的唯一目的是向用户表明正在发生某些事情

Answer 1

我觉得@A wolff 说的对，你可以用

$(".btnDoStuff").click(function () {
        $(".loading").show(function(){
            //dosomestuff
            //remove for Loop, it is just to demonstrate  that some code          is taking time
            for (var i = 0; i < 1000000000; i++) {
                var j = i + 1;
            }
            $(".loading").hide();
        });
    });

但是您也可以使用 window.setTimeout

Answer 2

@A.Wolff 非常接近，但似乎是时间问题？这是我的解决方案：

applyFilter: function (index, filter) {
    var obj = designer.baseImage,
        $loading = $('#loading-canvas');

    $loading.show('slow', function () {
        obj.filters[index] = filter;

        obj.applyFilters(function () {
            $loading.hide();
            designer.canvas.renderAll();
        });
    });        
}

原始解决方案在 show() 的第一个参数为 0 时不起作用，在 'fast' 上效果更好，在 'slow' 上完美工作。

应用过滤器时显示加载屏幕

Show loading screen while filter is being applied

html

javascript

jquery

canvas

fabricjs