装载程序图像不会在带有ajax请求的chrome上显示

Question

I have an ajax request which shows a loader image before ajax send and hide the loader image after ajax when request success. loader image shows perfectly on Firefox but not on chrome.

My code is working on Firefox

my code is..

$.ajax({
  method: "GET",
  url: "test.php",
  beforeSend:function(){
    $(".loader-image").show();
  },
  success:function(data){
    $(".loader-image").hide();
    //here i write success code
  }

});

Answer 1

i hope this helps

I had the same issue and i really don't know how it's happening, but it can be fixed using a small delay in code like follows.

solution 1

$.ajax({
  method: "GET",
  url: "/",
  beforeSend:function(){
    $(".loader-image").show(1);
    // please note i have added a delay of 1 millisecond , which runs almost same as code with no delay.
  },
  success:function(data){
    $(".loader-image").hide();
    //here i write success code
  }

});

solution 2

   $.ajax({
      method: "GET",
      url: "/",
      beforeSend:function(){

        setTimeout(function(){
           $(".loader-image").show();
        }, 1);
        // please note i have added a delay of 1 millisecond with js timeout function which runs almost same as code with no delay.
      },
      success:function(data){
        $(".loader-image").hide();
        //here i write success code
      }

    });

Answer 2

Your code seems ok. but I think may be the beforeSend callback is not getting executed. As an other solution, can you try the folowing code:

$(".loader-image").show();
$.ajax({
  method: "GET",
  url: "test.php",

  complete:function(data){
    $(".loader-image").hide();
  },
  success: function(){
    //write the success code here
  }

});