是否可以在AJax调用中显示Loader（进度条）一秒钟

Question

这是我的网页，如屏幕截图所示。

用户登录应用程序后，单击后退按钮，我不应该向他显示登录页面，而是在显示他/她在单击“提交”按钮后登录的页面。 / p>

与google的gmail功能类似。

我能够实现这种行为，但有些我无法显示进度条（一旦点击浏览器后退按钮，我直接显示登录后的页面）

HTML：

<div id="loader" class="loaderMain">
     <div class="loading_inner"><img src="images/loader.gif"/></div>
            </div>

JS：

function submitLoginFormforbackbutton(email , password) {
  var email_input = email ;
  var pin_input = password;
  var logininfo = {
    'email': email_input,
    'pin': pin_input
  };
  var login_information = JSON.stringify(logininfo);
  $.ajax({
    type: 'POST',
    dataType: 'json',
    data: login_information,
    async: true,
    contentType: "application/json; charset=utf-8",
    cache: false,
    url: url + '/REGENTS/orn/webchecklogin',
    timeout: 7000,
        beforeSend: function()
                    { 
                       $("#loader").show(); 
                    }, 
                    complete: function() 
                    { 
                      $("#loader").hide();
                    },
    success: function(response) {

      ---------
      ----------
      ----------
    }

  });
}

CSS：

.loaderMain{
    width: 100%;
    height: 101%;
    display:none;
    background: none;
    position: fixed;
    z-index: 99999;
    top:0px;
    transition: 0.2s;
    -webkit-transition-duration:0.2s;
       -moz-transition-duration:0.2s;
         -o-transition-duration:0.2s;
} 



.loading_inner{
    width:60px;
    height:60px;
    text-align:center;
    left:50%; 
    top:50%;
    margin-top:-34px;
    margin-left:-32px;
    position:absolute;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 3px;
    z-index:999999999;
}

.loading_inner img{
    width:32px;
    margin-top:13px;
}