title: how to get ajax .load function to not re-load entire page
body: <p>I am using the ajax .load function to load content and images on my site. Once a link is clicked I want the target content (any page with #sub-content) to be loaded dynamically into the #content div. So far the code works in loading the content. However, upon the first load of any page it seems that the entire page is still reloading in the browser. More specifically, the left sidebar area with the nav and header is flashing when a link is clicked. It's not until a page is loaded a first time and cached in the browser, then clicked again that the load function is working the way I want it to. That is, loading the content without re-loading the entire page, i.e. sidebar and nav. </p>
  
  <p>The question then is <strong>how can I make this code work to link to a desired page and have it load in the #content div without re-loading entire page on the initial click?</strong> (I was previously using an iframe to load content but this method is obviously more up-to-date and I hope I can get it to work). Thanks!! </p>
  
  <p>The website URL: <a href="http://www.adamclarkart.com" rel="nofollow">www.adamclarkart.com</a></p>
  
  <p>The code:</p>
  
  <pre><code> // Part 1
  $(document).ready(function(){
      $("#content").load("beach-1.html");
  });
  
  $(function(){
  
          $('#illustrationsSection a').click(function(){
              location.hash=$(this).attr('href').match(/(^.*)\./)[1]
              return false
          })
  
          $('#sketchesSection a').click(function(){
              location.hash=$(this).attr('href').match(/(^.*)\./)[1]
              return false
          })
  
          $('#motionTab a').click(function(){
              location.hash=$(this).attr('href').match(/(^.*)\./)[1]
              return false
          })
  
          $('#infoTab a').click(function(){
              location.hash=$(this).attr('href').match(/(^.*)\./)[1]
              return false
          })
  
          $('#info a').click(function(){
              location.hash=$(this).attr('href').match(/(^.*)\./)[1]
              return false
          })
  // Part 2 
          var originalTitle=document.title
          function hashChange(){
              var page=location.hash.slice(1)
              if (page!=""){
                  $('#content').load(page+".html #sub-content")
                  document.title=originalTitle+' – '+page
              }
          }
  
  // Part 3, ajax spinner .gif
      $('html')
      .ajaxStart(function(){
          $(this).addClass('ajax-spinner')
      })
      .ajaxStop(function(){
          $(this).removeClass('ajax-spinner')
      })
  
  // Part 4
          if ("onhashchange" in window){ // cool browser
              $(window).on('hashchange',hashChange).trigger('hashchange')
          }else{ // lame browser
              var lastHash=''
              setInterval(function(){
                  if (lastHash!=location.hash)
                      hashChange()
                  lastHash=location.hash
              },100)
          }
      })
  </code></pre>