title: Preload images in ajax loaded content
body: <p>I am using this script...</p>
  
  <p>It load content from a specifc #id in a URL to current page,  and animate it...  sliding from side of the page...when user click on a link</p>
  
  <p>Everything works except images taking time to load... I tried and struggling to incorporate image preloader to this? So all the content loads together</p>
  
  <pre><code>function goTo(href) {
  
      var left = $(window).width();
      $('#id').css("left", left);
  
      $.ajax({
          url: href,
          success: function (data) {
  
              var content = $(data).find('#id').html();
  
              // Windows Load Function
              $(window).load(function () {
  
                  $("#id").html(content).animate({
                      left: '0',
                  }, 'fast');
  
                  var title = $('#id').find('h1').text();
                  $('head').find('title').text(title);
  
              });
          }
      });
  }
  
  // check for support before we move ahead
  
  if (typeof history.pushState !== "undefined") {
      var historyCount = 0;
  
      // On click of link Load content and animate
      $('.access a').live('click', function () {
  
          var href = $(this).attr('href');
  
          goTo(href);
  
          history.pushState(null, null, href);
          return false;
      });
  
      window.onpopstate = function () {
          if (historyCount) {
              goTo(document.location);
          }
          historyCount = historyCount + 1;
      };
  }
  </code></pre>