如何取消图像加载
假设在 Javascript 中您将 SRC 分配给 IMG 标签。这是一个很大的 SRC，您想在它完成加载之前取消它。将 SRC 分配给另一个图像不会阻止数据加载。
也就是说，在加载过程中，您可以将 SRC 分配给另一个较小的图像，该较小的图像将被加载并显示在您的浏览器中。但是，原始 SRC 仍在继续下载。
同样，删除IMG节点也不会阻止SRC继续下载。请不要猜测，请查看重现步骤。
REPRO
在 Windows 中的 Chrome 中加载此 URL：http://68.178.240.17/imgLoadTest/imgLoadTest.htm
按 CTRL-SHIFT-J 打开开发者面板
在 Chrome 开发人员面板的顶行图标上，单击“网络”图标以查看网络活动。
在第 1 步中加载的网页上，单击“加载图像”按钮，然后观察开发人员面板，开始加载大型 (32meg) 图像。
在网页上单击“尝试取消”按钮以加载不同的图像。
加载小图像，但在开发人员面板中观察网络，并注意到大图像继续下载。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
快速解答
将
img标记的src属性设置为空字符串将中断当前下载，即使在 Chrome 上也是如此。＃＃＃细节
如今，大多数浏览器都实现了旧答案中的非标准机制，以编程方式中止连接。这不是通过协议请求来实现的，而是通过客户端内存操作来实现的。请记住，这不是标准行为，而是大多数供应商的礼貌行为。也就是说，它无法在所有浏览器上运行。
我准备了一个 jsfiddle 来展示这个机制的实际应用（密切关注网络
### Old answer (2011)
您的浏览器通过特定的 HTTP GET 请求来请求该图像，如 HTTP 协议中所指定。一旦请求，http 服务器就会开始传输。
因此，它位于浏览器（作为 http 客户端）和 http 服务器之间。
由于 http 协议没有考虑中止传输的选项，因此浏览器应该实现一种不符合标准的机制来以编程方式中止连接。但由于任何标准中都没有指定这一点，我认为您找不到任何方法可以使用 javascript 或任何客户端代码来做到这一点。
Quick answer
Setting the
srcattribute of theimgtag 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.
使用透明的base64编码的GIF取消以避免额外的请求和android上的双页加载：
Cancel with transparent base64 encoded GIF to avoid additional requests and double page load on android:
虽然我现在找不到 bug 报告，但我相信这是一个长期记录的 WebKit bug。 Firefox（我认为还有 IE）有更理智的行为。我回想一下，但如果我记得在那些浏览器上，重置 img.src 实际上会取消未完成的下载。我确信 Firefox 在下载“排队”等待打开 HTTP 连接的机会时会执行此操作，而且我似乎记得有时它实际上会强制关闭连接。
我从未找到一种方法来诱使基于 WebKit 的浏览器取消正在进行的 img 下载，无论它只是排队还是已经在积极下载。
如果您正在制作诸如地图客户端之类的东西并且需要对图像进行更细粒度的控制，这真的很糟糕。
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.
将 .src 属性设置为空字符串应该取消加载：
Setting the .src property to an empty string should cancel the load:
是的，当 img 标签具有 src="" 属性时，页面会在 Android 上下载两次。
在最近的 Android 版本中仍然会出现这种情况。
我还没有找到任何其他浏览器可以做到这一点。
但我找到了一个解决方案：使用不带 src 属性的 img 标签。
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.
最终的答案是网络工作者。
将图像加载到网络工作线程中，停止网络工作线程将停止图像加载。
你可以从这段代码中得到这个想法：
https://github.com/NathanWalker/ng2-image-lazy-load
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
这对我有用：
this work for me:
src 属性必须是 有效的非空网址
所以 null 或空字符串是不合法的（尽管它们有时有效）。
使用：（
请参阅此处）
the src property must be a valid non-empty URL
So null or empty string are not legal (even though they sometimes work).
Use:
(see here)
遗憾的是，将 src 设置为空字符串在基于 WebKit 的浏览器（如 Safari）中不起作用。这是 Stella 提到的错误报告的链接。
https://bugs.webkit.org/show_bug.cgi?id=6656
Sadly, setting src to an empty string does not work in WebKit-based browsers like Safari. Here is the link to the bug report which Stella mentioned.
https://bugs.webkit.org/show_bug.cgi?id=6656