1. javascript
  2. November 27, 2011
  3. By Sam Deering

ajaxSetup for loading image

Simple jQuery code snippet to set loading image using ajaxSetup() so that every time an AJAX request is sent a loading image is displayed and when it returns the loading image is hidden. The reason for including the same code for complete and success is that the .load() function seems to ignore (or override) the complete function.

Demo

ajaxsetup-demo

The Code

$.ajaxSetup({
 beforeSend: function() {
    $('#general-ajax-load ').fadeIn();
 },
 complete: function() {
    $('#general-ajax-load ').fadeOut();
 }
 success: function() {
    $('#general-ajax-load ').fadeOut();
 }
});
Sam Deering
Meet the author
Sam Deering
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
Sponsors