title: CSS change before Synchronous ajax call not working in chrome
body: <p>Am facing a weird issue in chrome recently. I was trying to make an ajax call to a server side function as below</p>
  
  <pre><code>                $.ajax({
              beforeSend: function(){
                   $('.create_loader').show();
              },
              complete: function () {
  
                  $('.create_loader').hide();
              },
              type: "POST",
              url: "../WebService.asmx/control",
              async: false,
              data: "{'controlname':'" + hy + "'}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (data) {
                  fy = data.d;
  
              },
              error: function (e) { alert("error"); }
          });
  </code></pre>
  
  <p>OK, the purpose is just to show the loader image. But its working well in firefox. The image showing, and hides when ajax finishes. But in chrome that is not loading. Also when I tried to make <strong>async:true</strong>, the image loader is working well in chrome too. But in my case asynchronous call will not work.</p>
  
  <p>I dont know what to make this work well in chrome too..</p>