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

The Code

$.ajaxSetup({
 beforeSend: function() {
    $('#general-ajax-load ').fadeIn();
 },
 complete: function() {
    $('#general-ajax-load ').fadeOut();
 }
 success: function() {
    $('#general-ajax-load ').fadeOut();
 }
});

Meet the author

Sam Deering

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.