Javascript: Cancel/Stop Image Requests

Question

I have a website that makes heavy use of Ajax. Occasionally I need to load large image files on the page for the user. My question is, when these large image files are being download, is there a way to stop them if, say, the user navigates away from the page displaying the image? Thanks.

Cycloplegia

Are you noticing that the browser isn't canceling downloads when you navigate away from a page? I agree that it should. I could, however, also easily imagine that different browsers could have different behavior. Unfortunately. – Maurits

Well, this is a ajax application so I never leave the page however, I tried 'leaving' the page and to my surprise the image does NOT stop downloading. Wow. Didn't expect that. I am using FF 3.0.10 / IE8 and Fiddler to watch the traffic. – Cycloplegia

Answer 1

I had the exact same issue, when users 'paged' quickly through (ajax) search results the browser was still trying to download profile images for every page not just the current one. This code worked for me, called on the paging event just before the new search was run:

//cancel image downloads
if(window.stop !== undefined)
{
     window.stop();
}
else if(document.execCommand !== undefined)
{
     document.execCommand("Stop", false);
}

Essentially it's like clicking the "Stop" button on the browser.

Tested in IE, FireFox, Chrome, Opera and Safari

Botanize

Thankyou sooooo much MyWhirledView. I've been grappling this for days. – Epode

This does work in Safari ... see the similar problem & fix here: #3146700 – Eventuality

Is there a way to limit this to one file type? – Baccate

@Baccate Unfortunately no, you do not have granular control over how it is applied. – Botanize

Answer 2

like this.

$(img).attr('src','');

Curvilinear

Answer 3

Assuming that you are using ajax to load the images, you could simply abort the request in the window.onunload event. Declare a global variable for the XMLHttpRequest object that you are using.

var xhr;
//if using the XMLHttpRequest object directly
//you may already be doing something like this
function getImage(...){
  xhr = new XMLHttpRequest();
  xhr.open(....);
}

if using jQuery, you could assign the return value of the call you $.ajax() or $.get to xhr variable.

xhr = $.ajax(.....);

Handle the window.onunload and abort the request.

window.onunload = function(){
  xhr.abort();
}

Variate

I'm not using ajax to load the images. I thought setting src = '' would do the trick but it does not. What I am really looking for it a document.getElementById('image').stopLoading(); :) – Cycloplegia

Answer 4

Reassigning the SRC tag to a different image does not work in IE7, it continues trying to download the first image.

Here is the setup:

I created an HTTP handler that is of type JPEG. It contains code that never finishes executing. So someImage.src=myhandler.ashx will perpetually sit there loading until it times out.

In the middle of this, press another button that reassigns the image to a small image file: someImage.src=small.jpg

The request for myhandler.ashx does not end, even though we have reassigned the src.

Furthermore if you actually delete the node someImage.parentNode.removeChild(someImage) is still keeps trying to download myhandler.ashx

Tested with IE7 and monitored with HTTP Watch Pro.

Footpound

I have a section of our page that I want all image loading to stop. I have found for IE if I go to the parent node and set innerHTML to "", it aborts all requests quite nicely. This only works for IE, Safari and Firefox will continue loading the images seemingly no matter what (programmatically clicking the stop button is not suitable for me for other reasons) – Heptamerous

Answer 5

The poor mans solution would be to simply set the SRC property of the image tag to an empty string, or point it towards a widget.

edit

Saw your comment, surprised it doesn't work with changing the SRC property to empty... try using a blank.gif or something.

If that doesn't work, you may be bounded by browser architecture, meaning you are S.O.L.

Gribble