Stop loading of images on a hashchange event via JavaScript or jQuery

Question

I am using the jQuery BBQ: Back Button & Query Library 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.)

That part works just fine, but there is a problem.

Example of my problem

---

Say the "home" page has a DIV a number of images in it and a list of links ...

• Page One
• Page Two
• Page Three

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.

This clears out the contents of the "home" page and loads in "Page One" content. That works fine.

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.

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 stop on a hashchange event?

?? Example code would be like ...

---

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

    //code to stop images from loading

    // now load in new HTML content

});

Answer 1

I'm fairly confident this isn't possible (but would be happy to be proved wrong).

The reason being is that images embedded in your website result in HTTP GET requests being sent to your server. Once that request is sent, your server is going to process and respond to that request, which will get handled by the browser.

Now, if it is possible, I would guess it would involve either going through each image and nulling out it's src attribute (which I don't think will work because, as I said, the requests have already been sent). Either that or calling some (likely browser dependent) mechanism which halts image loading.

Answer 2

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's own way of doing it if the browser doesn't support window.stop()

See more here: https://developer.mozilla.org/en/DOM/window.stop

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

window.stop();

For IE use:

document.execCommand("Stop", false);

However be careful ...

This is basically like pressing the "stop" button in the browser so everything currently being downloaded will stop, not just images (like 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);
    }   
}