title: Hide loading gif after ajax callback
body: <p>I have a simple question but I couldn't find a clean answer. I need to load heavy images after an ajax call and I want to use an animated gif as a pre-loader. I'm using the follow code:    </p>
  
  <pre><code>function loadProducts(url) {
      $("#loading").show();
      $('#inner').fadeOut(1).load(url + ' .product-list', function() {
          $('#inner').fadeIn(1000, function() {
              $("#loading").hide();
          });
      });
  }
  </code></pre>
  
  <p>The #loading is hiding when the HTML is loaded <code>.load(url + ' .product-list'</code>. The problem is that the heavy images are still rendering on the screen and I would like to keep showing the animated .gif until the renders of the images are finished. Is there a way to know when the images on the screen are rendered?.
  Thanks in advance.</p>