Ajax 加载器未在 chrome 中显示答案

【问题标题】：Ajax loader is not showing up in chromeAjax 加载器未在 chrome 中显示
【发布时间】：2013-05-25 13:55:40
【问题描述】：

我正在为 ajax 调用使用 ajax 加载程序（如请稍候 .gif 图像）图像。在几天之前，它可以完美运行并以 chrome 显示。

我没有发现图片有任何问题，或者我们没有更改它。它在 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>

divajaxProgress 会在出现 ajax 调用时出现，一个简单的例子是页面加载。这是功能

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

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

你可以看到图片here

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

【问题讨论】：

请显示js代码。
你的 ajax 调用在哪里？
@mithunsatheesh 我的页面上有几个ajax调用，常见的是document.ready函数。
@Atber 是一个简单的js函数，我用js代码修改了问题。请看一看。
我已经用谷歌的一些错误代码更新了这个问题，请看看

标签： html ajax dom ajax-request

【解决方案1】：

遇到了同样的问题。并得到了这个解决方案

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

如果您在 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);

【讨论】：

【解决方案2】：

而是在成功或错误中隐藏加载程序。在ajax调用的完整状态下隐藏它

$.ajax({
        url: 'url here',
        type: "post",
        async: false,
        beforeSend: function () {
             ShowProgress();
        },
       complete: function () {
           HideProgress();
       },
       success: function (result) {
            alert(result);       
       },
       error: function(err){
          //Show error 
          alert(err);
       }
    });

【讨论】：

【解决方案3】：

尝试：更改或添加到 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();
        }
    })

【讨论】：

【解决方案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>

好像是误加了。

【讨论】：

【解决方案5】：

试试这个。在 Chrome 上测试！！！

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() 并在 success 回调或 成功后调用 HideProgress() strong>错误回调。

【讨论】：

不，它也不起作用......请在上面的答案中查看我的回复。
好吧，我想问题不在于显示或隐藏功能。问题应该出在您的 ajax 调用中。你能附上你正在使用的ajax代码功能吗？您的问题并非特定于您的问题背景。
ajax调用没有任何问题。请尝试在 chrome 中打开图像（来自我提供的链接）并查看检查元素，您会在那里找到图像，但它没有在 chrome 中显示。如果你在 IE 和 Mozilla 中打开它，你可以看到图像。
访问 www.preloaders.net 并获取您的加载程序的 png 版本。加载程序的 gif 版本我相信我会逐渐弃用。预加载器站点生成器通常建议加载器的 png 版本。祝你好运
您可以使用zamzar.com 之类的转换器将 gif 转换为 png，以防万一您使用的是要保留的自定义 gif。这是我最好的兄弟。祝你好运。

【解决方案6】：

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

异步：假

如果是这样，我已经看到动画不更新的问题。大多数浏览器在同步 ajax 调用期间不会取回控制权并且不会更新图像。然而不知何故，Firefox 正在更新图像。

【讨论】：

不，我不知道。但我的观点是，这张图片在几天前就可以正常工作，现在它只出现在谷歌浏览器中。
ajax调用没有任何问题。请尝试在 chrome 中打开图像（来自我提供的链接）并查看检查元素，您会在那里找到图像，但它没有在 chrome 中显示。如果你在 IE 和 Mozilla 中打开它，你可以看到图像。

【解决方案7】：

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

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

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

如果这有帮助，请告诉我。

【讨论】：

不是它不工作。另一点是我只是将图像的类型从 .gif 更改为 .png 并且它显示在那里但没有动画，即动画无法从 .png 图像工作。