Loader not working during synchronous ajax call in chrome
I was also facing same problem from last 1 year Even with async: false. Finally got a best solution, but not sure that it will work in you case, it worked me 101%.
Below is code:-
$.ajax({
.. ,
beforeSend: function () { showLoader(); },
success: function (data) { hideLoader(); }
});
function showLoader() {
$("#progressbar").css("display", "");
}
function hideLoader() {
setTimeout(function () {
$("#progressbar").css("display", "none");
}, 1000);
}
you can make these two function common in any common javascript file. So that you can call these function multiple places or js files.
Html is :
<div class="spinnermodal" id="progressbar" style="display: none; z-index: 10001">
<div style="position: fixed; z-index: 10001; top: 50%; left: 50%; height:65px">
<img src="~/Images/loading.gif" alt="Loading..." />
</div>
</div>
Css is:
.spinnermodal {
background-color: #FFFFFF;
height: 100%;
left: 0;
opacity: 0.5;
position: fixed;
top: 0;
width: 100%;
z-index: 100000;
}
Try this. I hope it will work for you as well. Happy coding :-)
Put setTimeout before the ajax request. I have tried many solutions but this one definitely works.
$("#loader").show();
setTimeout(function () {
//AJAX REQUEST CODE
$("#loader").hide();
},10);