Does changing the src attribute of an image stop the image from downloading?

Question

Let's say that I have two accordion tabs. The first one loads hundreds of images and is open when the page loads.

I want to be able to stop the images from downloading if the user clicks on the second accordion tab. Will changing the src attributes of the images via js stop the images from downloading? Or do the requests just continue until completion and not show up on the page?

Answer 1

I have a script that loads the SO logo in exactly 3 seconds that I had made for another question.

http://alexturpin.net/slowimage/slowimage.php

Using it, I tried to reproduce the problem:

var img = new Image();
img.onload = function() {
    alert("loaded");
};
img.src ="http://alexturpin.net/slowimage/slowimage.php";

setTimeout(function() {
    img.src = "";
}, 1000);

http://jsfiddle.net/Xeon06/RrUvd/1/

From what I gather, in Chrome, the onload doesn't get fired, but the browser keeps on showing a spinner and if I go on the network tab and find my image and check it's content, it's there. So my answer would be no, the image still loads, at least in Chrome.

This is an interesting problem, I suggest you try and test it in as many browsers as possible and write some kind of blog post on it.

Answer 2

Your browser asks for that image with a specific HTTP GET request, as specificated in HTTP protocol. Once it asks for it, the http server starts the transfer.

So, it is between the browser (as http client) and the http server.

Since http protocol does not takes into account the option to abort a transfer, the browser should implement a out-of-standard mechanism to programmatically abort the connection. But since this is not specified in any standard, i think you won't find any way to do that with javascript or any client side code.

---

You can try window.stop() to stop all requests, but not individual ones.

---

If you wanted to stop a single request for a large image, what you could do is load the image into a document within a hidden IFRAME. The onload event of the IFRAME can be used to load the image into the main document, by which time it ought to be cached (presuming you have the caching directives configured to do so).

If the image is taking too long, then you can access the IFRAME's contentWindow and issue a stop command to that.

You need to have as many IFRAME elements as there are images that can be requested simultaneously.

Taken directly from here & here.