title: Stop loading of images on a hashchange event via JavaScript or jQuery
body: <p>I am using the <a href="http://benalman.com/projects/jquery-bbq-plugin/" rel="nofollow noreferrer">jQuery BBQ: Back Button &amp; Query Library</a> plugin to create a page that pulls in dynamic content when a link is clicked. When the link is clicked the hash is changed and new content is pulled in (the 'default' action of clicking a href is therefore disabled.)</p>
  
  <p>That part works just fine, but there is a problem.</p>
  
  <h2>Example of my problem</h2>
  
  <hr>
  
  <p>Say the "home" page has a DIV a number of images in it and a list of links ...</p>
  
  <ul>
  <li>Page One</li>
  <li>Page Two</li>
  <li>Page Three</li>
  </ul>
  
  <p>The images may take a while to load, in the meantime the user will often not wait for them to load fully and click the "Page One" link.</p>
  
  <p>This clears out the contents of the "home" page and loads in "Page One" content. That works fine. </p>
  
  <p><strong>The problem is the images from the "home" page are still loading in the browser even though the user has moved on from the "home" page.</strong></p>
  
  <p>I know this is happening becuase the page hasn't actually changed and I'm using the BBQ Plugin's hashchange hack but I want to know if there is a way in JavaScript to tell all the images currently loading to <strong><em>stop</em></strong> on a <em>hashchange</em> event?</p>
  
  <h2>?? Example code would be like ...</h2>
  
  <hr>
  
  <pre><code>$(window).bind('hashchange', function () {
  
      //code to stop images from loading
  
      // now load in new HTML content
  
  });
  </code></pre>