Ajax loader is not showing up in chrome

Question

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.

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.

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

The html mark-up is

<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

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.

@mithunsatheesh there are several ajax call on my page, the common one is document.ready function. — nrsharma, May 30 '13 at 05:54
@Atber It's a simple js function, I modified the question with js code. Please have a look. — nrsharma, May 30 '13 at 05:58
I had updated the question with some error code from google, please have a look — nrsharma, May 30 '13 at 06:08

score 6 · Answer 1 · answered May 30 '13 at 06:31

6

Did you recently change to use synchronous Ajax call?

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.

answered May 30 '13 at 06:31

Chong Yu

470
3
8

no, I don't. But my point is the image is working before some days and now its not showing up in Google chrome only. – nrsharma May 30 '13 at 06:36
There isn't any problem with ajax calls. Please try to open the image in chrome (from the link I provided) and have a look with inspect element you will find the image there but it is not showing in chrome. If you open it in IE and Mozilla you can see the image instead. – nrsharma May 30 '13 at 06:44

Ifeanyi Chukwu · Answer 2 · 2013-05-30T06:33:58.557

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.

edited May 30 '13 at 06:33

answered May 30 '13 at 06:13

Ifeanyi Chukwu

3,187
3
28
32

no it's not working either... and please see my reply in above answer. – nrsharma May 30 '13 at 06:28
well, i guess the problem is not the show or hide function. The problem should be in your ajax call. Could you attach the ajax code function you are using? Your question is not specific to the context of your problem. – Ifeanyi Chukwu May 30 '13 at 06:37
There isn't any problem with ajax calls. Please try to open the image in chrome (from the link I provided) and have a look with inspect element you will find the image there but it is not showing in chrome. If you open it in IE and Mozilla you can see the image instead. – nrsharma May 30 '13 at 06:39
Visit www.preloaders.net and get a png version of your loader. gif versions of loader i believe i gradually going through deprecation. preloaders site generators often suggest png versions of loaders. good luck – Ifeanyi Chukwu May 30 '13 at 06:44
You can use a converter like http://www.zamzar.com/ to convert the gif to png just in case u're using a custom gif you want to keep. this is my best bro. good luck. – Ifeanyi Chukwu May 30 '13 at 06:58

score 0 · Answer 3 · answered May 30 '13 at 06:00

0

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

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

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

Let me know if this helps.

answered May 30 '13 at 06:00

Jigar Pandya

6,004
2
27
45

not its not working. Another point is I just did change the type of image from .gif to .png and it is showing up there but not as animated i.e. the animation with not working from the .png image. – nrsharma May 30 '13 at 06:07

score 0 · Answer 4 · answered May 30 '13 at 08:17

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

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

<!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.

score 0 · Answer 5 · answered Mar 23 '15 at 06:52

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

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

score 0 · Answer 6 · answered May 08 '17 at 07:49

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

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

score 0 · Answer 7 · answered Aug 28 '20 at 06:39

Had the same problem. and got this solution

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

if you are using Property "async: false" in ajax call then please try this solution.

        $("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 loader is not showing up in chrome

7 Answers7