Question

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

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

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

REPRO

（1）在Windows中的Chrome中加载此网址：http://68.178.240.17/imgLoadTest/imgLoadTest.htm

（2）按CTRL-SHIFT-J

打开开发人员面板

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

（4）在步骤1中加载的网页上，单击“加载图像”按钮，并在开始加载大型（32meg）图像时观察开发人员面板。

（5）在网页上，单击“尝试取消”按钮以加载其他图像。

（6）加载小图片，但在开发人员面板中观看网络并注意到大图像继续下载。

Answer 1

更新

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

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

我准备了一个jsfiddle来展示这个机制（请密切关注检查员的网络面板）。

OLD ANSWER（2011）

您的浏览器要求使用HTTP协议中指定的特定HTTP GET请求的图像。一旦它请求它，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属性必须是valid non-empty URL 所以null或空字符串是不合法的（即使它们有时有效）。

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

（见here）

Answer 7

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

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

Answer 8

这项工作对我来说：

    if videoAsset != videoURLArray.last{
        videoInstruction.setOpacity(0.0, at: totalTime)
    }

如何从加载中取消图像

8 个答案:

更新

OLD ANSWER（2011）