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 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);
    }   
}