Question

68

How to cancel an image from loading

rated 0 times [ 69] [ 1] / answers: 1 / hits: 24231 / 14 Years ago, fri, march 11, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kayden

Add To Favorites

Follow

Total Points: 546

Total Questions: 102

Total Answers: 95

Location: Virgin Islands (U.S.)

Member since Fri, Mar 4, 2022

2 Years ago

answered 14 Years ago jameson · Accepted Answer

Quick answer

Setting the src attribute of the img tag to an 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 take into account the option to abort a transfer, the browser should implement an 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.