Chrome中的jQuery顯示和隱藏功能

我有一個Div，我想在正在執行AJAX請求時說「加載...」。我使用了一個名爲APE實時引擎，所以當一個事件來在我做的第一件事是顯示事業部，然後設置HTML到「正在加載...」這樣的：Chrome中的jQuery顯示和隱藏功能

$("#test").show(); 
$("#test").html("Loading...");

然後我的AJAX功能裏面我這樣做（我使用ExtJS的將其加載到網格）：

jsonfields = Ext.decode('[' + $.ajax({ 
    url: "ajax.php?getsensors="+raw.deviceId, 
    success: function(data) { 

     $("#test").hide(); 

    }, 
    async: false 
}).responseText + ']');

因此Firefox的加載DIV顯示，直到到達隱藏（）函數，然後消失，在Chrome Loading ... div完全不會出現，並且控制檯中沒有錯誤，因此有什麼想法？謝謝！

<div id="test"></div>

只有一個與測試的ID DIV，我也有試過

$("#test").html("Loading...");

，然後試圖清空空器（測試），仍然工作在Firefox和神祕無法在Chrome。我在加載到測試div中，只是爲了看看會發生什麼，在初始加載時顯示加載，然後當第一個AJAX請求完成時，它會成功清空div，但再也不會使用加載重新填充。

來源

2010-12-17 Doug Molineux

是否存在多個ID爲「test」的元素？ – simshaun 2010-12-17 17:15:32

您可以使用[JS小提琴]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/）演示重現問題嗎？ – 2010-12-17 17:18:13

ape是否有可能無法將事件發送給chrome？例如運輸失敗？ – 2010-12-17 17:19:37

那是jQuery的？因爲我有Viajeros.com類似的東西，建立這樣的：

$("#loading_indicator").bind("ajaxSend", function(e){ 
    $(this).show(); 
}).bind("ajaxComplete", function(){ 
    $(this).hide(); 
}).bind("ajaxError", function(){ 
    $(this).hide(); 
});

的「ajaxSend」，「ajaxComplete」和「ajaxError」事件是由jQuery的內部ajax調用解僱。 http://api.jquery.com/ajaxSend/

來源

2010-12-17 17:39:02 Danita

順便說一句：我不明白爲什麼有必要爲div設置HTML，如果你有它隱藏。或者它有時會有不同的內容？另外，我在Internet Explorer中遇到了空白div問題，我不得不將html設置爲「」，否則它們會消失。 – Danita 2010-12-17 17:43:53

感謝您的建議，我嘗試了幾種不同的方法，他們都沒有在鉻中工作，我嘗試手動設置文本，然後使用隱藏/顯示功能，設置html，然後清空它，結束了兩個組合 – 2010-12-17 17:48:36

您是否嘗試過.css（'visibility'，'visible'）和.css（'visibility'，'hidden'）？ – Danita 2010-12-17 17:54:34

皮特，

用戶加載GIF這一類的東西，

添加一個繁忙指示你旁邊點擊div和一次阿賈克斯成功刪除或隱藏throught類。

這是最commpon實踐

看到此鏈接

http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html

來源

2010-12-17 17:16:30 kobe

那麼阿賈克斯負載是由一個單獨的實時事件觸發的，所以沒有真正的「點擊」事件，我可以改變加載格。 – 2010-12-17 17:19:09

如果您實際上沒有傳遞快或慢的參數，我有時會遇到顯示和隱藏的問題。

所以：

$(this).show('slow);

或

$(this).hide('fast');

來源

2010-12-17 17:51:51

感謝您的建議，這已經出現了一些結果，我看到加載div出現和消失，但它只發生在請求完成後，彈出並消失，它在事件開始時不會改變 – 2010-12-17 17:57:36

它似乎沒有顯示，直到它到達ajax成功回調中的隱藏處，但show函數位於rt事件的頂部，它應該是第一件事情發生，甚至在發送ajax請求之前，RT事件處於callb本身，我不知道這是否會造成麻煩？ – 2010-12-17 18:06:30

就遇到這個問題我自己。我的解決方案...

要在Chrome中解決此問題，請在一毫秒的AJAX調用上使用超時。

E.g.

$("#mySpinningLoader").show(); 

var t = setTimeout(function() { 
    $.ajax({ 
     url: rootPath + controllerNAction, 
     async: false, 
     type: "POST", 
     data: JSON.stringify(lightweightObject), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data, textStatus, jqXHR) { 
      $("#mySpinningLoader").hide(); 
     } 
    }); 
}, 1);

來源

2013-07-10 09:59:16 LightNg

我有同樣的問題。加載動畫並未隱藏在ajax成功中。我剛剛在jQuery隱藏功能中添加了1毫秒。

function test() { 
    $('#loading').show(); 
    $.ajax({ 
     type: "POST", 
     url: "functions.asp", 
     cache: false, 
     crossDomain: false, 
     dataType: "text", 
     data: { action: "getData" }, 
     success: function (data, textStatus) { 
      $('#loading').hide(1); // Added a millisecond 
      // Do some actions 
     }, 
     error: function (xhr, aOptions, rError) { 
      $('#loading').hide(); 
     } 
    }); 
}

來源

2015-09-04 09:34:48 krlzlx

Chrome中的jQuery顯示和隱藏功能

回答

相關問題