Javascript: Cancel/Stop Image Requests

Solution 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

Solution 2:

like this.

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

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