如何从加载中取消图像 [英] How to cancel an image from loading
问题描述
假设您在Javascript中将SRC分配给IMG标记。它是一个大型SRC，你想在加载完成之前取消它。将SRC分配给另一个图像不会阻止数据加载。
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.
也就是说，在加载过程中，您可以将SRC分配给另一个较小的图像，较小的图像图片将被加载并显示在您的浏览器中。但是，原始SRC仍在继续下载。
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.
同样，删除IMG节点也不会阻止SRC继续下载。请不要猜猜，看看重复步骤。
Similarly, deleting the IMG node will not prevent the SRC from continuing to download. No guesses please, look at the repro steps.
REPRO
（1）在Chrome中加载此网址Windows： http://68.178.240.17/imgLoadTest/imgLoadTest.htm
(1) Load this URL in Chrome in Windows: http://68.178.240.17/imgLoadTest/imgLoadTest.htm
（2）按CTRL-SHIFT-J打开开发人员面板
(2) Open up the developer panel by pressing CTRL-SHIFT-J
（3）在Chrome开发人员面板的顶行图标上单击用于观看网络活动的网络图标。
(3) On the top row of icons in the Chrome developer panel click the Network icon to watch network activity.
（4）在步骤1中加载的网页上，单击加载图像按钮，并在开始加载大型（32meg）图像时观察开发人员面板。
(4) 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.
（5）在网页上，单击尝试取消按钮以加载其他图像。
(5) On the web page click the Try To Cancel button to load a different image.
（6）加载小图像，但在开发人员面板中观察网络并注意到大图像继续下载。
(6) A small image loads, but watch the network in the developer panel and notice that the large image continues to download.
推荐答案
更新
设置 src 属性空字符串的 img 标记会中断当前下载，即使在Chrome上也是如此。
Updated
Setting the src attribute of the img tag to the empty string will interrupt the current download, even on Chrome.
现在大多数浏览器实现了旧的答案中的标准外机制，以编程方式中止连接。这不是通过协议请求实现的，而是通过客户端内存操作实现的。请记住，这不是标准行为，但大多数供应商都很礼貌。也就是说，它无法在每个浏览器上运行。
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.
我准备了 jsfiddle 显示了这种机制的运作（密切关注检查员的网络面板）。
I've prepared a jsfiddle showing this mechanism in action (keep an eye at the network panel of the inspector).
您的浏览器会根据HTTP协议中的规定请求具有特定HTTP GET请求的图像。一旦它请求它，http服务器就开始传输。
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.
因此，它位于浏览器（作为http客户端）和http服务器之间。
So, it is between the browser (as http client) and the http server.
由于http协议没有考虑中止传输的选项，浏览器应该实现一种不符合标准的机制来以编程方式中止连接。但由于这没有在任何标准中指定，我认为你不会用javascript或任何客户端代码找到任何方法。
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.
这篇关于如何从加载中取消图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
