Binding throbber div for jQuery AJAX requests

/ Published in: jQuery
Save to your folder(s)

jQuery bindings for showing and hiding a div during AJAX requests. The div will not show unless the AJAX request takes a certain amount of time (in this case 300ms). This will reduce the flicker effect of showing and hiding throbbers.

Copy this code and paste it in your HTML
  1. $('#loading').bind('ajaxStart', function() {
  2. var n = $(this);
  3.'state', 'started');
  4. setTimeout(function() {
  5. if ( && == 'started') {
  6. n.slideDown(500);
  7. }
  8. }, 300);
  9. }).bind('ajaxStop', function() {
  10. var n = $(this);
  11.'state', 'stopped');
  12. n.slideUp(500);
  13. });

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.