如何从加载中取消图像

Question

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

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

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

摄制

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

(3)在Chrome开发人员面板的顶行图标上,点击网络图标以观看网络活动.

(4)在步骤1中加载的网页上,单击"加载图像"按钮,并在开始加载大型(32meg)图像时观察开发人员面板.

(5)在网页上单击"尝试取消"按钮以加载其他图像.

(6)加载小图像,但在开发人员面板中观察网络并注意到大图像继续下载.

Answer 1

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

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

我准备了一个jsfiddle显示这个机制的运作(密切关注检查员的网络面板).

您的浏览器会根据HTTP协议中的指定,使用特定的HTTP GET请求来请求该映像.一旦它请求它,http服务器开始传输.

因此,它位于浏览器(作为http客户端)和http服务器之间.

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

Answer 2

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

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

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