Advanced Search

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.

Expand | Embed | Plain Text

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.