Javascript或jquery加载器

I am new to jquery and encountered an issue regarding the loader to display while browser is loading. In my MVC application, I have ajax calls and on success(in some calls) i need to redirect to a url(got from response), I have implemented ajax.start and ajax.complete and is working fine for ajax call but when the window.location.href is called on success the loader hides and the browser starts loading, though i have also written code on window.onbeforeunload(). I need to have loader on ajax call as well as browser loading . Please help me out.

$(document).ajaxStart(function () {       
$("#loaderDiv").show();   
});

 $(document).ajaxComplete(function () {    
 $("#loaderDiv").hide();   
 });  

  window.addEventListener('beforeunload', function (e) {   
 $("#loaderDiv").show();   
 });

And the ajax call is :

  success: function (result) {                
            if (result.Success == true && result.url != null && result.url 
              != undefined && result.url != "")
            {
                window.location.href = result.url;   
            }

Did you try this?

$.ajax({
        //some condition
        },
        beforeSend: function (){
          //your loader code
        },
    });