How to cancel an image from loading

Question

Suppose in Javascript that you assign the SRC to an IMG tag. It is a large SRC and you want to cancel it before it has finished loading. Assigning the SRC to another image will not stop the data from loading.

That is, in the middle of the load you can assign the SRC to another smaller image and the smaller image will be loaded and appear in your browser. However, the original SRC still continues downloading.

Similarly, deleting the IMG node will not prevent the SRC from continuing to download. No guesses please, look at the repro steps.

REPRO

Load this URL in Chrome in Windows: http://68.178.240.17/imgLoadTest/imgLoadTest.htm
Open up the developer panel by pressing CTRL-SHIFT-J
On the top row of icons in the Chrome developer panel click the Network icon to watch network activity.
On the web page loaded in Step 1 click the Load Image button and watch the developer panel as a large (32meg) image starts loading.
On the web page click the Try To Cancel button to load a different image.
A small image loads, but watch the network in the developer panel and notice that the large image continues to download.

See http://stackoverflow.com/questions/4926215/cancel-single-image-request-in-html5-browsers — Crescent Fresh, Mar 12 '11 at 01:05

Luca Fagioli · Accepted Answer · 2020-05-20T07:37:32.667

29

Quick answer

Setting the src attribute of the img tag to the empty string will interrupt the current download, even on Chrome.

Details

Nowadays most of browsers implemented that out-of-standard mechanism thought in the old answer to programmatically abort the connection. This is not achieved through a protocol request, but with a client-side in-memory operation. Keep in mind that is not a standard behaviour, but most of vendors courtesy. That is, it could not work on every browser.

I've prepared a jsfiddle showing this mechanism in action (keep an eye at the network panel of the inspector).

Old answer (2011)

Your browser asks for that image with a specific HTTP GET request, as specified 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.

edited May 20 '20 at 07:37

answered Mar 11 '11 at 21:16

Luca Fagioli

10,385
5
46
44

"*Since http protocol does not takes into account the option to abort a transfer,*" - But you can suspend or abort a file download (that is an HTTP GET request). – Paolo Oct 12 '15 at 21:23
@Paolo I do not know where you got this information from, but no, you cannot suspend (HTTP is a stateless protocol) or abort any file download, even less with a GET request. – Luca Fagioli Oct 13 '15 at 07:22
I understand your point. But actually you can start a download of a file (from the browser) and then at a certain point you can abort the download. I get this information *naively* from the browser's interface. What happens then? Isn't the transmission actually stopped? Or is it just the client that starts ignoring incoming data (while the server keeps sending) ? – Paolo Oct 13 '15 at 07:59
@Paolo If you are referring to the "stop download" function of the browser, that's another story: that is the **browser application** closing the network socket (it does not send or use a HTTP GET request: it is done with Java, C++, or whatever programming language the browser is made of), where the transfer is running. You cannot close a socket with JavaScript, nor you can abort the transfer since the HTTP protocol does not take into account such a possibility. – Luca Fagioli Oct 13 '15 at 08:05
Thank you, I understand now – Paolo Oct 13 '15 at 08:14
This works for me in chrome – killdash9 Feb 16 '21 at 19:14

score 4 · Answer 2 · answered May 17 '11 at 20:38

Although I can't find the bug report now, I believe this is a long-standing logged WebKit bug. Firefox (and IE I think) have more sane behavior. I'm going back a bit in my brain, but if I recall on those browsers, resetting the img.src will in fact cancel outstanding downloads. I am positive that Firefox does this when a download is "waiting in line" for a chance at an open HTTP connection, and I seem to recall that it will actually force close connections sometimes.

I've never found a way to coax WebKit based browsers into cancelling an img download in progress, whether it is just queued or already actively downloading.

This really sucks if you're making something like a mapping client and need more fine grained control over images.

Have you found a workaround or webkit by any chance? Setting src to "" doesn't help — user1361529, Apr 09 '18 at 20:18

Dan Ochiana · Answer 3 · 2014-10-23T11:04:08.780

2

Setting the .src property to an empty string should cancel the load:

//load image from url
var img = new Image();
img.src = 'http://somedomain.com/image.jpg';

......

//cancel load
img.src = '';

edited Oct 23 '14 at 11:04

answered Oct 03 '14 at 13:14

Dan Ochiana

2,827
1
26
25

I search too a solution but set an empty string come with some effect has explain here : https://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/ – Draeli Oct 26 '15 at 09:16

score 2 · Answer 4 · answered Jul 30 '17 at 08:55

2

Cancel with transparent base64 encoded GIF to avoid additional requests and double page load on android:

var img = new Image();
img.src = 'http://google.com/favicon.ico';

img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=;'

answered Jul 30 '17 at 08:55

Joshua Robinson

2,908
1
22
35

score 0 · Answer 5 · answered May 15 '16 at 16:50

0

Yes, page is downloaded twice on Android when an img tag has an src="" attribute.
This still occurs on recent Android versions.
I have not found any other browser that does that.
But I found a solution: use an img tag without src attribute.

answered May 15 '16 at 16:50

figolu

938
8
5

score 0 · Answer 6 · edited May 23 '17 at 11:46

0

the src property must be a valid non-empty URL So null or empty string are not legal (even though they sometimes work).

USe:img.src='http://xxxx'; img.onerror=null;

(see here)

edited May 23 '17 at 11:46

Community

1
1

answered Mar 01 '17 at 01:16

kofifus

11,635
8
73
114

score 0 · Answer 7 · answered Feb 06 '18 at 09:14

0

The ultimative answer is web workers. Load the image inside an webworker and stopping the web worker will stop the image loading.

You can get the idea from this code: https://github.com/NathanWalker/ng2-image-lazy-load

answered Feb 06 '18 at 09:14

teter

1,068
1
12
18

score 0 · Answer 8 · answered Mar 16 '18 at 09:42

0

this work for me:

imageVarName.src = '';
imageVarName.onload = null;
imageVarName.onerror = null;

answered Mar 16 '18 at 09:42

ardleon

1
1

Please don't just give a block of code as an answer! You should explain why and how this works – bert Mar 16 '18 at 11:19

How to cancel an image from loading

8 Answers8

Quick answer

Details

Old answer (2011)

Linked