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

将过滤器应用于占据整个画布的图像对象可能需要几秒钟才能显示较大的图像，我希望在发生这种情况时显示加载屏幕，但.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(); 
    }); 
}

当方法被调用（点击上）“显示加载”被立即记录到控制台。加载div在应用过滤器之前不会显示，此时加载屏幕闪烁，消失，并且“隐藏加载”会记录到控制台。 'show loading'记录到控制台时，没有显示加载屏幕的任何想法？

编辑：加载屏幕的唯一目的，所以向用户指示某些事情正在发生

来源

2015-05-07 Brian

Javascript是单线程语言。你应该尝试例如：'$ loading.show（0，function（）{obj.filters [index] = filter; //所有其余的过滤逻辑在这里}）;' –

设计明智的问题之一：用户需要查看加载进度，还是只是发生了一些事情？对许多人来说，答案是纯粹的简单，但这取决于你的设计。 –

@MariM他们不需要“看”加载进度，加载屏幕是指示发生了什么 – Brian

@ 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，以更好地工作'，并用完美的作品‘缓慢’。

来源

2015-05-07 16:02:50 Brian

我觉得@A沃尔夫是正确的，你可以使用

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

但是你也可以使用窗口。 setTimeout

来源

2015-05-07 15:37:49 ShazebAli

这里是小提琴 https://jsfiddle.net/shazebali/rsrot97z/5/ – ShazebAli

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

回答

相关问题