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.

Answer 1

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

Answer 2

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 (anyone know how to do this in Safari?)

Answer 3

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.

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.