Ajax加载器没有出现在chrome中

I am using an ajax loader (like a please-wait .gif image) image for the ajax calls. Before some days it was working perfectly and showing in chrome.

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

I didn't see any problem with the image or we don't change it. It is showing correctly in IE, Mozilla and in other browsers but I am not getting why it is not showing in chrome.

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

I had looked at Ajax Loader Not Showing in Google Chrome but not getting any help.

我曾经看过谷歌浏览器中的Ajax Loader Not Showing但没有得到任何帮助。

The html mark-up is

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 will show up when an ajax call will be there, a simple example is page load. Here is the functions

当ajax调用将在那里时,divajaxProgress将出现,一个简单的例子是页面加载。这是功能

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

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

You can see the image here

你可以在这里看到图像

Please suggest me what is the problem here.

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

6 个解决方案

#1

Did you recently change to use synchronous Ajax call?

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

async: false

If so, I have seen this issue with animation not updating. Most browsers don't get the control back during the synchronous ajax call and does not update the image. However somehow Firefox was updating the image.

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

#2

try this instead. Tested on 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();
        }
    })

This might not be the structure of your ajax but make sure you call the ShowProgress() in the beforeSend and call the HideProgress() after the success callback or error callback.

这可能不是你的ajax的结构,但要确保你在beforeSend中调用ShowProgress()并在成功回调或错误回调之后调用HideProgress()。

#3

You could try something like following. Using Jquery you can change the display style of the blocks. This should work in cross browser too.

你可以尝试下面这样的事情。使用Jquery,您可以更改块的显示样式。这应该也适用于跨浏览器。

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

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

Let me know if this helps.

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

#4

Your image is corrupted. It is not showed up in Chrome at all.

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

If you open an image in a text editor you will see a html form appended:

如果您在文本编辑器中打开图像,您将看到附加的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>

Seems like it was appended by mistake.

好像是误插了。

#5

Try with: change or add to async: true, in ajax section like as following.it may work..

尝试使用:更改或添加到async:true,在ajax部分,如下所示。它可能工作..

$.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();
        }
    })

#6

Instead hidding loader in success or error. Hide it under complete state of ajax call

相反,隐藏装载机成功或错误。在完整的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);
       }
    });

#1