Question

将过滤器应用于占据整个画布的图像对象可能需要几秒钟才能显示更大的图像，并且我希望在发生这种情况时显示加载屏幕，但.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，此时加载屏幕会闪烁，消失，并且“隐藏加载”会记录到控制台。当'show loading'被记录到控制台时，为什么没有显示加载屏幕的想法？

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

Answer 1

我认为@A wolff是对的，你可以使用

(function (){          
  // table2 code content is taken away to save space in this file on stackoverflow... 
}());

但是你也可以使用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，更快地使用＆＃39; fast＆＃39;并与“慢慢”完美配合。

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

2 个答案: