by nolovelust
28. April 2011 10:28
I've had my eureka moment while viewing source of a site last night.
I usually create a show and hide functions and call them with ajax.load function. But last nigh I've realised I could just listen ajaxStart and Stop events. Well It may be normal way of life for you but it never came to my mind. Anyways, here is the code to listen start/stop events and show/hide loading animation with jQuery
$(document).ready(function () {
$(document).ajaxStart(function () { showProgress() }).ajaxStop(function () { hideProgress() });
});
function showProgress() {
$('body').append('<div id="progress"><img src="/assets/images/loading.gif" alt="" width="16" height="11" /> Loading...</div>');
$('#progress').center();
}
function hideProgress() {
$('#progress').remove();
}
jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this;
}
Subscribe