«
»

How to add an ajax loader to your website

January 22nd, 2014

We all love AJAX calls, but it’s important to show the visitors that the page is loading.
Here’s an easy way of implementing a generic AJAX loader image to your website which is shown for all ajax calls.

  1. Create your custom AJAX loader image for free here: www.ajaxload.info
  2. Place the following in your masterpage/layout view at the very bottom, before body end tag:
    ?View Code HTML
    1

    <img src="/gfx/ajax-loader.gif" id="loading" alt="Loading...">
  3. Add the CSS class:
    ?View Code CSS
    1
2
3
4
5
6

    #loading {
  position: fixed;
  left: 48%;
  top: 48%;
  display: none;
}
  4. Add this to your javascript:
    ?View Code JAVASCRIPT
    1
2
3
4
5
6
7

    $(document).ajaxSend(function (event, request, settings) {
    $('#loading').show();
});
 
$(document).ajaxComplete(function (event, request, settings) {
    $('#loading').hide();
});

Note that this requires the jQuery library. If you’re not using it, you either should or know what to do to make it work.

This entry was posted on Wednesday, January 22nd, 2014 and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply