Javascript: Cancel/Stop Image Requests

Viewed 22484

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.

5 Answers

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