如何取消加载图像答案

【问题标题】：How to cancel an image from loading如何取消加载图像
【发布时间】：2011-07-13 19:02:38
【问题描述】：

假设在 Javascript 中您将 SRC 分配给 IMG 标记。它是一个大型 SRC，您想在它完成加载之前取消它。将 SRC 分配给另一个图像不会停止加载数据。

也就是说，在加载过程中，您可以将 SRC 分配给另一个较小的图像，较小的图像将被加载并显示在您的浏览器中。但是，原来的 SRC 仍会继续下载。

同样，删除 IMG 节点不会阻止 SRC 继续下载。请不要猜测，请查看重现步骤。

复习

在 Windows 的 Chrome 中加载此 URL：http://68.178.240.17/imgLoadTest/imgLoadTest.htm
按 CTRL-SHIFT-J 打开开发者面板
在 Chrome 开发者面板的顶行图标上，单击网络图标以查看网络活动。
在第 1 步加载的网页上，单击“加载图像”按钮，然后在开发人员面板开始加载大 (32meg) 图像。
在网页上单击“尝试取消”按钮以加载不同的图像。
加载一个小图像，但在开发者面板中观察网络并注意到大图像继续下载。

【问题讨论】：

见stackoverflow.com/questions/4926215/…

标签： javascript tags load image

【解决方案1】：

快速解答

将img 标记的src 属性设置为空字符串将中断当前下载，即使在Chrome 上也是如此。

详情

现在大多数浏览器都实现了旧答案中认为的以编程方式中止连接的非标准机制。这不是通过协议请求实现的，而是通过客户端的内存操作实现的。请记住，这不是标准行为，而是大多数供应商的礼貌。也就是说，它不能在所有浏览器上运行。

我准备了一个jsfiddle 来展示这种机制的作用（请留意检查器的network面板）。

旧答案 (2011)

您的浏览器通过 HTTP 协议中指定的特定 HTTP GET 请求请求该图像。一旦请求它，http 服务器就会开始传输。

所以，它位于浏览器（作为 http 客户端）和 http 服务器之间。

由于 http 协议不考虑中止传输的选项，浏览器应该实现一种不符合标准的机制以编程方式中止连接。但由于这没有在任何标准中指定，我认为你不会找到任何方法来使用 javascript 或任何客户端代码来做到这一点。

【讨论】：

"由于 http 协议不考虑中止传输的选项，" - 但是您可以暂停或中止文件下载（即 HTTP GET 请求） .
@Paolo 我不知道你从哪里得到这些信息，但是不，你不能暂停（HTTP 是一种无状态协议）或中止任何文件下载，更不用说使用 GET 请求了。
我明白你的意思。但实际上您可以（从浏览器）开始下载文件，然后在某个时间点您可以中止下载。我从浏览器界面天真地获得了这些信息。那会发生什么？传输不是真的停止了吗？还是只是客户端开始忽略传入数据（而服务器继续发送）？
@Paolo 如果你指的是浏览器的“停止下载”功能，那是另外一回事：即浏览器应用关闭网络套接字（它不发送或使用 HTTP GET 请求：使用 Java、C++ 或构成浏览器的任何编程语言完成），传输正在运行。您不能使用 JavaScript 关闭套接字，也不能中止传输，因为 HTTP 协议没有考虑到这种可能性。
谢谢，我明白了

【解决方案2】：

虽然我现在找不到错误报告，但我相信这是一个长期记录的 WebKit 错误。 Firefox（和我认为的 IE）有更理智的行为。我要回想一下，但如果我回想起那些浏览器，重置 img.src 实际上会取消未完成的下载。我很肯定 Firefox 会在下载“排队等待”打开 HTTP 连接时执行此操作，我似乎记得有时它实际上会强制关闭连接。

我从来没有找到一种方法来诱使基于 WebKit 的浏览器取消正在进行的 img 下载，无论它只是排队还是正在下载。

如果您正在制作地图客户端之类的东西并且需要对图像进行更精细的控制，这真的很糟糕。

【讨论】：

您有没有偶然找到解决方法或 webkit？将 src 设置为 "" 没有帮助

【解决方案3】：

将 .src 属性设置为空字符串应该会取消加载：

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

......

//cancel load
img.src = '';

【讨论】：

我也搜索了一个解决方案，但是设置了一个空字符串来有一些效果在这里解释：nczonline.net/blog/2009/11/30/…

【解决方案4】：

是的，当 img 标记具有 src="" 属性时，页面会在 Android 上下载两次。
在最新的 Android 版本上仍然会出现这种情况。
我还没有找到任何其他浏览器可以做到这一点。
但我找到了一个解决方案：使用没有 src 属性的 img 标签。

【讨论】：

【解决方案5】：

src 属性必须是valid non-empty URL 所以 null 或空字符串是不合法的（即使它们有时有效）。

用途：

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

（见here）

【讨论】：

【解决方案6】：

使用透明 base64 编码的 GIF 取消以避免额外的请求和在 android 上的双页面加载：

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

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

【讨论】：

【解决方案7】：

最终的答案是网络工作者。在 webworker 中加载图像，停止 webworker 将停止图像加载。

您可以从以下代码中获得灵感： https://github.com/NathanWalker/ng2-image-lazy-load

【讨论】：

【解决方案8】：

这对我有用：

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

【讨论】：

请不要只给出一段代码作为答案！你应该解释为什么以及如何工作