应用过滤器时显示加载屏幕 [英] Show loading screen while filter is being applied

问题描述

将过滤器应用于占据整个画布的图像对象可能需要几秒钟的时间才能处理较大的图像，我想在此过程中显示加载屏幕，但是.show()方法要等到过滤器打开后才会触发已应用.

Applying a filter to an image object that occupies the whole canvas can take a couple seconds with larger images and I want to display a loading screen while this is happening but the .show() method isn't firing until after the filter has been applied.

应用过滤器的当前方法:

Current method that applies the filter:

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();
    });
}

调用该方法(单击)时，显示加载"将立即记录到控制台.在应用过滤器之前，不会显示加载div，此时加载屏幕将闪烁，消失，并将隐藏加载"记录到控制台.有什么想法为什么在将显示加载"记录到控制台后为何不显示加载屏幕?

When the method is called (on click) 'show loading' is logged to the console immediately. The loading div is not displayed until the filter has been applied, at which point the loading screen flashes up, goes away, and 'hide loading' is logged to the console. Any ideas why the loading screen isn't displayed when 'show loading' is logged to the console?

加载屏幕的唯一目的是向用户指示正在发生的事情

The loading screen's sole purpose so to indicate to the user that something is happening

推荐答案

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

@A.Wolff was super close but it appeared to be a timing issue? Here's my solution:

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的情况，不能与快速"一起使用，而与慢速"一起使用则完美.

The original solution didn't work with show()'s first argument being 0, worked better with 'fast' and works perfectly with 'slow'.

这篇关于应用过滤器时显示加载屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！