Question

我有一个Div，我想在执行AJAX请求时说“正在加载...”。我正在使用一个名为APE的实时引擎，所以当一个事件出现时，我做的第一件事就是显示Div，然后将HTML设置为“Loading ...”，如下所示：

$("#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显示，直到它到达hide（）函数然后消失，在Chrome中，Loading ... div根本没有出现，并且控制台中没有错误，任何想法为什么？谢谢！

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

只有一个ID为test的div，我也试过

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

然后尝试使用empty（）清空测试，仍然可以在Firefox中使用，并且神秘地不在Chrome中。我在加载到测试div时添加，只是为了看看会发生什么，在初始加载时它说加载，然后当第一个AJAX请求完成时它成功清空div但是它再也没有重新加载。

Answer 1

这是jQuery吗？因为我在Viajeros.com上有类似的东西，所以设置如下：

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

jQuery的内部ajax调用触发了“ajaxSend”，“ajaxComplete”和“ajaxError”事件。 http://api.jquery.com/ajaxSend/

Answer 2

我有同样的问题。加载动画没有隐藏在ajax成功中。我刚刚在jQuery hide函数中添加了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();
        }
    });
}

Answer 3

皮特，

用户为这种东西加载gif，

在您单击的div旁边添加一个忙碌指示符，一旦ajax成功删除它或者通过课堂隐藏它。

这是最轻松的练习

请参阅此链接

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

Answer 4

如果你没有真正传递快速或慢速的参数，我有时会遇到显示和隐藏的问题。

所以：

$(this).show('slow);

或

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

Answer 5

我自己也遇到过这个问题。我的解决方案......

要在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);

jQuery在Chrome中显示和隐藏功能

5 个答案: