Stop loading images on hashchange event via JavaScript or jQuery

Question

I use the jQuery BBQ: Back Button and Query Library plugin to create a page that pulls dynamic content when a link is clicked. When you click on the link, the hash changes and the new content is pulled (therefore, the "default" action of clicking on href is disabled.)

This part works very well, but there is a problem.

Example of my problem

---

Say that on the home page there is a DIV several images in it and a list of links ...

• Page 1
• Page 2
• Page 3

Images may take some time to download, in the meantime, the user often does not wait for them to fully download and click on the "First Page" link.

This clears the contents of the "home" page and loads into the "One Page" content. It works great.

The problem is that images from the homepage are still loading in the browser, even if the user has gone from the homepage.

I know this is due to the fact that the page has not actually changed, and I use the BBQ Plugin hashchange hack, but I want to know if there is a way in JavaScript to tell about all the currently loaded stop images in the hashchange event?

?? Sample code will look like ...

---

$(window).bind('hashchange', function () { //code to stop images from loading // now load in new HTML content }); 

Answer 1

I tested this solution in WebKit (Chrome / Safari), Firefox and IE and it seems to work.

I used a function that uses window.stop (); for most browsers, and IE is a proprietary way to do this if the browser does not support window.stop ()

More details here: https://developer.mozilla.org/en/DOM/window.stop

So, for browsers that support it (Firefox, WebKit), use:

 window.stop(); 

To use IE:

 document.execCommand("Stop", false); 

However, be careful ...

This is similar to clicking the Stop button in the browser, so everything that is currently loading stops, not just the images (as I wanted).

So inside ...

 $(window).bind('hashchange', function () { }); 

Here is the function I used ...

 function stopDownloads() { if (window.stop !== undefined) { window.stop(); } else if (document.execCommand !== undefined) { document.execCommand("Stop", false); } } 

Answer 2

I am sure that this is impossible (but it would be happy if it were proved wrong).

The reason is that the images embedded in your site send HTTP GET requests to your server. After sending this request, your server will process and respond to this request, which will be processed by the browser.

Now, if possible, I would suggest that this will be connected either with the passage of each image or with the cancellation of its src attribute (which, as I think, will not work, because, as I said, requests have already been sent). Either this, or a call to some (probably browser-dependent) mechanism that stops image loading.