正在應用過濾器時顯示加載屏幕

將過濾器應用於佔據整個畫布的圖像對象可能需要幾秒鐘才能顯示較大的圖像，我希望在發生這種情況時顯示加載屏幕，但.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

正在應用過濾器時顯示加載屏幕

回答

相關問題