title: jQuery wait till AJAX page is fully loaded
body: <p>I use AJAX to display content of page B on page A.</p>
  
  <p>How can I make jQuery wait for everything to load (text, images etc.) before the content is displayed?</p>
  
  <pre><code>$.ajax({
      url:"pageB.html",
      beforeSend: function() {
          //show loading animation here
      }
      success: function(data) {
          //hide loading animation here
          $("body").append(data);
      }
  });
  </code></pre>
  
  <p>I use beforeSend to show a loading animation to the user when the AJAX request is being processed. Now I want to "extend" the waiting time so that the loading animation does not disappear until all images are loaded.</p>
  
  <p>I tried to initially hide appended data, wait for all images to load and then show content - 
   <code>$("body").on("load", "images class here", function() {//show content})</code> inside <code>success</code> but the event does not appear to fire.</p>
  
  <p>Any ideas?</p>
  
  <p>UPDATE:</p>
  
  <p>Updated code:</p>
  
  <pre><code>$.ajax({
      url:"pageB.html",
      beforeSend: function() {
          //show loading animation here
      }
      success: function(data) {
          //hide loading animation here
          $("body").append(data);
          $("body").on("onload", "img", function() {//display content});
      }
  });
  </code></pre>