如何取消加载图像

Question

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

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

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

复制品

1. 在 Chrome 中加载这个 URL Windows: http://68.178.240.17/imgLoadTest/imgLoadTest.htm

2. 按 CTRL-SHIFT-J 打开开发人员面板

3. 在 Chrome 开发人员面板的顶行图标上，单击网络图标以观看网络活动。

4. 在第 1 步加载的 web 页面上，单击“加载图像”按钮，然后在开发人员面板中观察大型 (32meg) 图像开始加载。

5. 在 web 页面上单击尝试取消按钮以加载不同的图像。

6. 加载了一个小图像，但在开发人员面板中观察 .network 并注意到大图像继续下载。

Answer 1

快速回答

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

细节

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

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

---

旧答案（2011）

您的浏览器使用特定的 HTTP GET 请求请求该图像，如 HTTP 协议中指定的那样。 一旦请求，http 服务器就开始传输。

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

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

Answer 2

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

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

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

Answer 3

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

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

......

//cancel load
img.src = '';

Answer 4

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

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

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

Answer 5

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

Answer 6

src 属性必须是有效的非空 URL因此 null 或空字符串是不合法的（即使它们有时有效）。

用：

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

（见这里）

Answer 7

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

你可以从这个代码中得到这个想法： https : //github.com/NathanWalker/ng2-image-lazy-load

Answer 8

这对我有用：

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

Answer 9

遗憾的是，将 src 设置为空字符串在基于 WebKit 的浏览器（如 Safari）中不起作用。这是 Stella 提到的错误报告的链接。

https://bugs.webkit.org/show_bug.cgi?id=6656