如何取消加载图像

How to cancel an image from loading(如何取消加载图像)

问题描述

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

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.

也就是说，在加载过程中，您可以将 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.

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

Similarly, deleting the IMG node will not prevent the SRC from continuing to download. No guesses please, look at the repro steps.

复习

1. 在 Windows 的 Chrome 中加载此 URL:http://68.178.240.17/imgLoadTest/imgLoadTest.htm

按 CTRL-SHIFT-J 打开开发者面板

Open up the developer panel by pressing CTRL-SHIFT-J

在 Chrome 开发者面板的顶行图标上，单击网络图标以查看网络活动.

On the top row of icons in the Chrome developer panel click the Network icon to watch network activity.

在第 1 步加载的网页上，单击加载图像按钮，然后观察开发人员面板，开始加载一个大 (32meg) 图像.

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.

推荐答案

快速解答

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

Quick answer

Setting the src attribute of the img tag to the empty string will interrupt the current download, even on Chrome.

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

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.

我已经准备了一个 jsfiddle 来展示这种机制的作用(请留意 网络面板).

I've prepared a jsfiddle showing this mechanism in action (keep an eye at the network panel of the inspector).

<小时/>

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

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 客户端)和 http 服务器之间.

So, it is between the browser (as http client) and the http server.

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

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.

这篇关于如何取消加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！