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. n.data('state', 'started');
  4. setTimeout(function() {
  5. if (n.data() && n.data().state == 'started') {
  6. n.slideDown(500);
  7. }
  8. }, 300);
  9. }).bind('ajaxStop', function() {
  10. var n = $(this);
  11. n.data('state', 'stopped');
  12. n.slideUp(500);
  13. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.