jQuery在緩慢的操作過程中顯示「加載」

Question

我試圖在jQuery的慢速操作過程中顯示一個小的加載圖像，但無法正確顯示。 這是一張有數千行的大表格。當我檢查「mostrarArticulosDeReferencia」複選框時，它會從這些行中刪除「隱藏」類。這個操作需要幾秒鐘，我想給出一些反饋。 「加載」是用小gif動畫

這裏一個div是完整的代碼

jQuery(document).ready(function() { 
jQuery("#mostrarArticulosDeReferencia").click(function(event){ 
    if(jQuery("#mostrarArticulosDeReferencia").attr("checked")) { 
     jQuery("#loading").show(); //not showing 
     jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation 
     jQuery("#loading").hide(); 
    } else { 
     jQuery("#loading").show(); //not showing 
     jQuery("#listadoArticulos tr.r").addClass("hidden"); //slow operation 
     jQuery("#loading").hide(); 
    } 
}); 
jQuery("#loading").hide(); 
}); 

看起來jQuery是「優化」的三線

 jQuery("#loading").show(); //not showing 
     jQuery("#listadoArticulos tr.r").removeClass("hidden"); 
     jQuery("#loading").hide(); 

而且從來沒有顯示加載DIV。 任何想法？

加成：有更快的方式做這種顯示/隱藏的事情？發現切換方式比較慢。

更新： 我想這

jQuery("#mostrarArticulosDeReferencia").click(function(event){ 
    if(jQuery("#mostrarArticulosDeReferencia").attr("checked")) { 
      jQuery("#loading").show(); //not showing 
      jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation 
      setTimeout("jQuery('#loading').hide()", 1000); 
    } else { 
      jQuery("#loading").show(); //not showing 
      jQuery("#listadoArticulos tr.r").addClass("hidden"); //slow operation 
      setTimeout("jQuery('#loading').hide()", 1000); 
    } 
}); 

這就是我得到

1. 點擊複選框
2. 沒有在2/3秒（處理）
3. 網頁被更新
發生
4. 加載div在瞬間顯示

更新2： 我有一個工作解決方案。但爲什麼我要使用的setTimeout，使其工作超出了我......

jQuery("#mostrarArticulosDeReferencia").click(function(event){ 
    if(jQuery("#mostrarArticulosDeReferencia").attr("checked")) { 
      jQuery("#loading").show(); 
      setTimeout("jQuery('#listadoArticulos tr.r').removeClass('hidden');", 1); 
      setTimeout("jQuery('#loading').hide()", 1); 
    } else { 
      jQuery("#loading").show(); 
      setTimeout("jQuery('#listadoArticulos tr.r').addClass('hidden');", 1); 
      setTimeout("jQuery('#loading').hide()", 1); 
    } 
}); 

更新3： 剛剛發現的這種特殊情況下更好的解決方案。

//mostrar u ocultar articulos de referencia 
$("#mostrarArticulosDeReferencia").click(function(event){ 
    if($("#mostrarArticulosDeReferencia").attr("checked")) 
     $("tr.r").css({'display':'table-row'}); 
    else 
     $("tr.r").css({'display':'none'}); 
}); 

使用的.css（{「顯示」：「無」}）原來是WAY不是隱藏（）快，因此無需加載動畫...
這篇文章給我看光：show/hide performance。

Answer 1

我試了一切，我不得不得出結論，這是瀏覽器brainfart的產品。

1. 的jQuery告訴瀏覽器顯示/隱藏加載DIV
2. 的jQuery告訴瀏覽器添加從行
3. 的jQuery告訴瀏覽器/刪除隱藏類顯示/隱藏加載DIV
4. 瀏覽器就以錯誤的順序（2排在首位）所有上述步驟

「setTimeout的」在我的最後一次更新是迫使瀏覽器執行壽按照正確的順序中的所有步驟。 它吮吸，不是優雅，但至少它的作品...

更新：setTimeout是必要的，因爲jquery「簡化」的命令鏈。如果我告訴它隱藏一個元素並再次顯示它，它將簡單地忽略該命令，因爲最終結果將與無所作爲相同。

Answer 2

您是否試過使用ajaxStart來運行您的更新功能？

Answer 3

我認爲它工作正常。此操作：

jQuery("#listadoArticulos tr.r").removeClass("hidden"); 

是不是真的那麼慢，它在幾毫秒頂部進行，所以你看不到的加載信息，因爲它只是在那裏很短的時間。

Answer 4

我想你想要做

jQuery("#listadoArticulos tr.r").removeClass("hidden"); 

作秀的回調函數內。

看看這個方法的文檔在這裏：http://docs.jquery.com/Effects/show

可以實現通過調用show(0);

相同的「即時顯示」效果，但是你想做的回調？沒問題，這樣做：

show(0, function() { jQuery("#listadoArticulos tr.r").removeClass("hidden"); }); 

簡單！ :)

Answer 5

我也看到了這種行爲，這取決於使用的瀏覽器。 IE是受影響最大的一個。原因不是jQuery很慢，儘管JavaScript在IE中運行速度較慢，但​​更多的是由於新HTML的呈現。 setTimeout（）幫助的原因是因爲它執行了第一個操作，並且只有在瀏覽器完成呈現新的HTML時才完成第二部分。整個操作實際上比較慢，但反饋使它更好。

演示這一點的一種方法是隱藏長表並運行相同的代碼。它會做同樣的事情，但由於表格是隱形的，並且不會使整個動作更快。

有幾種方法可以解決這個問題。

1. 儘量避免使用表格並改爲使用DIV佈局。表格渲染速度慢，並且根據瀏覽器的不同，表格可能只能被看到然後完全渲染。
2. 如果您必須使用表格，請考慮使用多個粘貼在一起的100行表格。這樣一旦第一張表格被重新格式化，頁面就開始渲染。
3. 如果只有一個大表是唯一的出路，而且您知道用戶只能看到頂部的行，您可以兩次執行操作，第一次在頂部行中，第二次在所有行上執行。這是最慢和最不理想的解決方案，但可以通過向操作添加jQuery篩選器來實現，非常容易。

Answer 6

這不回答原來的問題，但它是任何更快地對錶本身使用CSS規則的一類：

#listadoArticulos.hideCertainRows tr.r { display: none } 

和切換這樣的顯示：

jQuery("#listadoArticulos").addClass("hideCertainRows"); 

？

Answer 7

顯然你在燒製過程中的「長時間運行進程」的異步請求（是的，異步，換句話說，它不與代碼同步運行！）。您需要在異步請求的回調函數結束時調用$('#loading').hide()。

這裏是一個很好的例子：

$('#loading').show(); 
$.getJSON('someURL', function(data) { 
    // Do slow processing. 
}); 
$('#loading').hide(); 

這顯然是行不通的。它會顯示，觸發一個異步請求，然後立即隱藏。你需要重寫代碼：

$('#loading').show(); 
$.getJSON('someURL', function(data) { 
    // Do slow processing. 
    $('#loading').hide(); 
}); 

Answer 8

剛一說明 - 我已經開發了plugin創建與它裝載圖形疊加股利。

Answer 9

把一個div您的網頁上的某個地方，像這樣：

<div id="spinner" class="spinner" style="display:none;"> 
    <img id="img-spinner" src="@Url.Content("~/images/loading.gif")" alt="Loading"/> 
</div> 

然後勾顯示和隱藏於ajaxStart，ajaxStop和ajaxError事件，像這樣：

$("#spinner").bind("ajaxSend", function() { $(this).show(); }) 
$("#spinner").bind("ajaxStop", function() { $(this).hide(); }) 
$("#spinner").bind("ajaxError", function() { $(this).hide(); }); 

Answer 10

嘗試使用回調「完整」的展示方法，js大部分基於異步事件，並且這三行：

jQuery("#loading").show(); //not showing 
jQuery("#listadoArticulos tr.r").removeClass("hidden"); 
jQuery("#loading").hide(); 

是g無需等待即可執行，因此，您的演出，添加課程並立即隱藏div，這就是爲什麼您無法看到div的原因，您無需等待即可隱藏它，並且它看起來很快，甚至消失得非常快，甚至它可能永遠不會顯示（不知道該類型的任何優化）。

如果在完整的回調中添加最後兩個，它將起作用，更多http：//api.jquery。COM /顯示/：

jQuery("#loading").show(400, function(){ 
    jQuery("#listadoArticulos tr.r").removeClass("hidden"); 
    jQuery("#loading").hide(); 
}); 

在任何情況下，也在爲Ajax請求，這樣做的正確方法（我想象將是有用的人）使用ajaxStart和ajaxStop這樣的：

$(document).ajaxStart(function() { 
    $("#loading").show(); 
}).ajaxStop(function() { 
    $("#loading").hide(); 
}); 

加入了removeClass沒有回調的：

也許你的問題躺在事實，那就是對於removeClass沒有回調，但你可以做下一個：

jQuery("#loading").show(400, function(){ 
    var els = jQuery("#listadoArticulos tr.r"); 
    els.each(function(i, el) { 
     el.removeClass("hidden"); 
     if (els.length == i +1) jQuery("#loading").hide(); 
    }); 
}); 

試試這個太：

var els = jQuery("#listadoArticulos tr.r"); 
els.each(function(i, el) { 
    if (i == 0) jQuery("#loading").show(); 
    el.removeClass("hidden"); 
    if (els.length == i +1) jQuery("#loading").hide(); 
}); 

您可以添加這個問題，如果你有圖片或激活，一旦你刪除類的任何額外的代碼，就恨不得躲裝載沒有本機方法div，所以即使你刪除隱藏的類，也沒有簡單的方法來等待對象可見。

我只是注意到，這是2年前，也許你不需要這個了。