Question

我正在使用ajax加载器（如请等待.gif图像）图像进行ajax调用。在某些日子之前，它完美地工作并以铬合金显示。

我没有看到图像有任何问题，或者我们没有更改它。它在IE，Mozilla和其他浏览器中正确显示，但我不知道为什么它没有在chrome中显示。

我看过Ajax Loader Not Showing in Google Chrome但没有得到任何帮助。

html标记是

<div id="divajaxProgress" class="progressouter" style="display: none;">
     <div class="ProgressInner">
        <img alt="" title="Please wait..." src="../Images/ajax-loader.gif" />
     </div>
</div>

当ajax调用出现时，

divajaxProgress会出现，一个简单的例子是页面加载。这是函数

function HideProgress() {                
  $("#divajaxProgress").hide();
}

function ShowProgress() {        
  if ($('#divajaxProgress').is(':visible') == false) {
    $("#divajaxProgress").show();
  }
}

您可以看到图片here

请告诉我这里有什么问题。

Answer 1

您最近是否更改为使用同步Ajax调用？

async：false

如果是这样，我看到动画没有更新这个问题。大多数浏览器在同步ajax调用期间不会获得控制权，也不会更新映像。但不知何故Firefox正在更新图像。

Answer 2

试试这个。测试铬!!!

function HideProgress(){
     $('#divajaxProgress').css('display','none');
}

 function ShowProgress() {        

    if($('#divajaxProgress').css('display') == "none"){
        $("#divajaxProgress").show();
    }
 }


    $.ajax({
        url: 'url here',

        type: "post",

        beforeSend: function () {
             ShowProgress();
        },

        error: function(){
           HideProgress();
        },

        success: function (result) {
            alert(result);
            HideProgress();
        }
    })

这可能不是您的ajax的结构，但请务必在 beforeSend 中调用ShowProgress()，并在成功后调用HideProgress() 回调或错误回调。

Answer 3

您可以尝试以下内容。使用Jquery，您可以更改块的显示样式。这应该也可以在跨浏览器中使用。

function HideProgress() {                
  $("#divajaxProgress").css({ display: "none" });
}

function ShowProgress() {                
  $("#divajaxProgress").css({ display: "inline" });
}

如果有帮助，请告诉我。

Answer 4

您的图片已损坏。它根本没有出现在Chrome中。

如果您在文本编辑器中打开图像，则会看到附加的html表单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1"><title>
    Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="ViewFile.aspx?FileId=2473" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGQ=" />
</div>

    <div>
    </div>
    </form>
</body>
</html>

似乎错误地附加了它。

Answer 5

尝试：更改或添加到ajax部分中的async: true,，如下所示。它可能有用..

$.ajax({
        url: 'url here',

        type: "post",
        async: true,  //for synchronize browser & server side.

        beforeSend: function () {
             ShowProgress();
        },

        error: function(){
           HideProgress();
        },

        success: function (result) {
            alert(result);
            HideProgress();
        }
    })

Answer 6

有同样的问题。并得到了解决方案

请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

如果您在ajax调用中使用属性“ async：false”，请尝试此解决方案。

        $("div.spanner").show();
        setTimeout(function () {
            $.ajax({
                    url: '@Url.Action("SaveAnswer")',
                    type: "POST",
                    data: data,
                    async: false,
                    success: function (result) {
                        console.log(result);
                        if (result.Status) {                            
                            bool = true;

                        } else {
                            alert(result.Message);
                        }
                    },
                error: function (result) {
                    $("div.spanner").hide();
                    }
            });
        }, 10);

Ajax加载器没有出现在chrome中

6 个答案: