Unobtrusive Javascrips with jQuery - Loading Spinner

May 12th, 2008

This is the first in an intended series of small snippets of unobtrusive javascript patterns.

What?

How to effortlessly and unobtrusively have a loading spinner appear on each ajax call with jQuery.
Ajax loading spinner

Why?

There are a number of reasons why, and they fall in a number of different categories

  • UI - You should always keep your user aware of what’s going on. In this case that something is loading.
  • Development - unobtrusive code degrades well by definition, and the effortless part explains itself.
How? Using jQuery
// Create closure
jQuery(function($){
	// Create img dom element and insert it into our document
	var loading = $('<img alt="loading" src="/images/loading.gif" />')
	.appendTo(document.body).hide();
	// Make the image appear during ajax calls
	$(window).ajaxStart(loading.show);
	$(window).ajaxStop(loading.hide);
});

2 Responses to “Unobtrusive Javascrips with jQuery - Loading Spinner”

  1. Pages tagged "unobtrusive" Says:

    […] tagged unobtrusiveOwn a Wordpress blog? Make monetization easier with the WP Affiliate Pro plugin. Unobtrusive Javascrips with jQuery - Loading Spinn… saved by 5 others     ravenstar321 bookmarked on 05/22/08 | […]

  2. bamboolabcode Says:

    Very interesting list. It’s a great addon to what I’m already doing. Thanks.

Leave a Reply

You must be logged in to post a comment.