javascript 如何取消加载图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5278304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to cancel an image from loading
提问by eeejay
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.
假设在 Javascript 中您将 SRC 分配给 IMG 标签。这是一个很大的 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.
也就是说，在加载过程中，您可以将 SRC 分配给另一个较小的图像，较小的图像将被加载并显示在您的浏览器中。但是，原始SRC 仍在继续下载。
Similarly, deleting the IMG node will not prevent the SRC from continuing to download. No guesses please, look at the repro steps.
同样，删除IMG节点也不会阻止SRC继续下载。请不要猜测，看看重现步骤。
REPRO
再现
(1) Load this URL in Chrome in Windows: http://68.178.240.17/imgLoadTest/imgLoadTest.htm
(1) 在 Windows 的 Chrome 中加载此 URL：http: //68.178.240.17/imgLoadTest/imgLoadTest.htm
(2) Open up the developer panel by pressing CTRL-SHIFT-J
(2) 按 CTRL-SHIFT-J 打开开发者面板
(3) On the top row of icons in the Chrome developer panel click the Network icon to watch network activity.
(3) 在 Chrome 开发者面板的顶部图标行中，单击网络图标以查看网络活动。
(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.
(4) 在第 1 步加载的网页上，单击加载图像按钮，然后在开发人员面板上看到一个大（32 兆）图像开始加载。
(5) On the web page click the Try To Cancel button to load a different image.
(5) 在网页上单击“尝试取消”按钮以加载不同的图像。
(6) A small image loads, but watch the network in the developer panel and notice that the large image continues to download.
(6) 加载了小图，但是在开发者面板中观察网络，发现大图还在继续下载。
回答by Luca Fagioli
Quick answer
快速回答
Setting the srcattribute of the imgtag to the empty string will interrupt the current download, even on Chrome.
将标签的src属性设置为img空字符串会中断当前的下载，即使在 Chrome 上也是如此。
Details
细节
Nowadays most ofbrowsers 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 jsfiddleshowing this mechanism in action (keep an eye at the networkpanel of the inspector).
我准备了一个jsfiddle 来展示这个机制的作用（留意检查器的网络面板）。
Old answer (2011)
旧答案（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.
您的浏览器使用特定的 HTTP GET 请求请求该图像，如 HTTP 协议中指定的那样。一旦请求它，http 服务器就会开始传输。
So, it is between the browser (as http client) and the http server.
因此，它位于浏览器（作为 http 客户端）和 http 服务器之间。
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.
由于 http 协议没有考虑中止传输的选项，浏览器应该实现一个不合标准的机制来以编程方式中止连接。但是由于这没有在任何标准中指定，我认为你不会找到任何方法来使用 javascript 或任何客户端代码来做到这一点。
回答by Stella Laurenzo
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.
虽然我现在找不到错误报告，但我相信这是一个长期记录的 WebKit 错误。Firefox（和我认为的 IE）有更理智的行为。我想回想一下，但如果我回想起那些浏览器，重置 img.src 实际上会取消未完成的下载。我很肯定 Firefox 在下载“排队等候”以获取打开 HTTP 连接的机会时会这样做，而且我似乎记得它有时实际上会强制关闭连接。
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.
我从来没有找到一种方法来诱使基于 WebKit 的浏览器取消正在进行的 img 下载，无论它只是排队还是已经在积极下载。
This really sucks if you're making something like a mapping client and need more fine grained control over images.
如果您正在制作类似映射客户端的东西并且需要对图像进行更细粒度的控制，这真的很糟糕。
回答by Dan Ochiana
Setting the .src property to an empty string should cancel the load:
将 .src 属性设置为空字符串应该会取消加载：
//load image from url
var img = new Image();
img.src = 'http://somedomain.com/image.jpg';
......
//cancel load
img.src = '';
回答by Joshua Robinson
Cancel with transparent base64 encoded GIF to avoid additional requests and double page load on android:
使用透明 base64 编码的 GIF 取消以避免额外的请求和在 android 上双页加载：
var img = new Image();
img.src = 'http://google.com/favicon.ico';
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=;'
回答by teter
The ultimative answer is web workers. Load the image inside an webworker and stopping the web worker will stop the image loading.
最终的答案是网络工作者。在 webworker 中加载图像并停止 web worker 将停止图像加载。
You can get the idea from this code: https://github.com/NathanWalker/ng2-image-lazy-load
你可以从这个代码中得到这个想法：https: //github.com/NathanWalker/ng2-image-lazy-load
回答by ardleon
this work for me:
这对我有用：
imageVarName.src = '';
imageVarName.onload = null;
imageVarName.onerror = null;
回答by figolu
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.
是的，当 img 标签具有 src="" 属性时，页面会在 Android 上下载两次。
这仍然发生在最近的 Android 版本上。
我还没有找到任何其他浏览器可以做到这一点。
但我找到了一个解决方案：使用没有 src 属性的 img 标签。
回答by kofifus
the src property must be a valid non-empty URLSo null or empty string are not legal (even though they sometimes work).
src 属性必须是有效的非空 URL因此 null 或空字符串是不合法的（即使它们有时有效）。
USe:img.src='http://xxxx';
img.onerror=null;
利用：img.src='http://xxxx';
img.onerror=null;
(see here)
（见这里）
