title: Image Loader during AJAX/JSON Process
body: <p>I have been trying to get an Image loader to show up that will cover the entire document during ajaxStart and hiding on ajaxStop as follows:</p>
  
  <p>Script:</p>
  
  <pre><code>$(this).ajaxStart(function(){
           $().addClass('imageLoader');
      });
  
      $(this).ajaxStop(function(){
             $().removeClass('imageLoader');
      });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.imageLoader { 
  background: #f5f3e5 url('images/common/loading.gif') 50% no-repeat; top }
  </code></pre>
  
  <p>It doesn't show the image as intended, although I know the ajaxStart/Stop are working when I tested it with some other sample code (i.e. Changing some text color to red).</p>
  
  <p>Is there a better way of implementing this? 
  I can't seem to understand what the issue is.</p>