加載的加載程序在DOM中顯示但未顯示

我一直在通常在調用數據庫之前在我的站點中添加加載程序，因此通常在使用$.post函數之前。加載的加載程序在DOM中顯示但未顯示

我從來沒有任何問題，直到現在我面臨着自己試圖在一些需要執行一段時間的隨機代碼之前添加加載器。

我可以看到append元素是如何加載到DOM中，但它沒有被渲染。

這是說明問題的例子代碼：

$('.demo').click(function(){ 

    alert("Starting..."); 

    //won't be rendered until the FOR finishes 
    $(this).append(' Loading...'); 

    for(var i = 0; i<800000000; i++){ 
    var nothing = 1 + Math.floor(Math.random() * i); 
    } 

});

這裏是活生生的例子： http://jsfiddle.net/88398/1/

我如何才能讓加載器下面的代碼執行之前被渲染？

謝謝。

來源

2013-06-20 Alvaro

這是因爲在更新dom之後，瀏覽器沒有時間重新繪製UI直到函數完成。

一個可能的解決方案，使用setTimeout()來延遲任務，這將提供瀏覽器更新UI的時間，然後執行setTimeout回調。

$('.demo').click(function(){ 
    alert("Starting..."); 
    $(this).append(' Loading...'); 

    setTimeout(function(){ 
     for(var i = 0; i<800000000; i++){ 
      var nothing = 1 + Math.floor(Math.random() * i); 
     } 
    }, 10) 
});

演示：Fiddle

的原因是瀏覽器選項卡運行像一個單獨的線程是在同一時間，瀏覽器只能做一個單一的任務。這意味着它可以更新UI或運行腳本。

你的情況，你有一個函數，在它（DOM更新）所做的任何更改將只在函數執行

完成，我希望我得到的術語正確

來源

2013-06-20 11:12:06

爲什麼不後生效。 t我有這個問題，而不是一個循環，我有一個'$ .load'函數？ – Alvaro

@Steve因爲$ .load是異步的 –

'load'會向服務器發送一個請求，然後線程執行完成，釋放瀏覽器做它想做的事，直到響應回來 –

加載的加載程序在DOM中顯示但未顯示

回答

相關問題