繁体   English   中英

如何取消加载图像

How to cancel an image from loading

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

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

再现

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

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

  3. 在 Chrome 开发者面板的顶部图标行中,单击网络图标以查看网络活动。

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

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

  6. 加载了一个小图像,但在开发人员面板中观看网络并注意大图像继续下载。

8 个回复

快速回答

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

细节

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

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


旧答案(2011)

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

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

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

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

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

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

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

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

......

//cancel load
img.src = '';

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

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

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

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

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

用:

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

(见这里

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

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

这对我有用:

imageVarName.src = '';
imageVarName.onload = null;
imageVarName.onerror = null;
1 javascript取消图像加载

我正在寻找一种使用 javascript 取消图像加载的方法。 我看过其他问题,隐藏它们是不够的。 此外,页面的其余部分必须加载(window.stop() 是不可能的)。 正在加载的页面不在我的控制之下,只有一件事可以保证 - 页面上的第一个<script>是我的 javascrip ...

2 加载图像后如何不观察?

我正在lazy-load我的图像。 当谈到view port时,我正在加载我的图像。它工作正常。我能够在查看端口时加载图像。但我面临一个问题。 当我松开视口时,我的图像gone ,然后又回来了。所以我需要不unobserve我的侦听器。 这是我的代码https://codesandbox.io/s ...

3 jQuery图像加载已取消

我正在使用Shadowbox打开弹出窗口。 在弹出窗口中完成工作之后,我将在父页面上添加一行,然后按照代码中的操作关闭阴影框。 从功能上讲,一切都很好地完成了,在父页面的表中追加了一行。 但是图像未附加在页面上。 我对其进行了更深入的研究,发现该请求已被jquery或以下文件中所示 ...

4 状态=加载图像时在Chrome中取消

在某些计算机上,Chrome出现问题: 我在Web应用程序中有一个加载对话框DIV。 当使用jqueryui对话框打开此DIV时,在Chrome中取消了对该DIV中的图像(加载gif)的请求(我在Chrome的网络日志中看到了该请求)。 Firefox或IE无法重现此 ...

5 JavaFX图像取消后台加载

简而言之; 有没有办法取消/清除JavaFX图像的后台加载? 在代码的某一时刻,我加载了一堆图像。 出于性能方面的考虑,这些被加载到后台 来自Images类。 问题在于,有时,用户交互会导致程序在完成之前图像的加载之前更新图像列表(而不需要先前图像)。 到那时,我想取消 ...

7 使用Javascript检测图像加载取消

我当前正在使用setTimeout和onLoad依次加载多个图像的页面上工作。 基本上,当图像完成加载时,会触发onLoad ,它会通过setTimeout调用开始另一个图像加载。 不幸的是,如果由于某种原因(例如随后的ajax调用)而中断了图像加载,则永远不会调用onload,也不会加载任 ...

8 使用ScrollMagic图像序列动画时取消图像加载

我正在使用ScrollMagic.js来创建演示动画上的图像序列动画。 我的代码与演示相同,但​​我正在使用117张图像。 当我在本地环境中对其进行测试时,所有功能都可以正常运行,但是当我将其部署在服务器上时,则无法正常工作。 图像加载正在通过“ 引荐来源网址政策”取消:降级时没有引荐来源 ...

9 滚动加载许多 src 图像获得取消状态

我正在使用 jquery Image Sequencer,在我的本地机器上我没有问题。 但是当我将它部署在生产服务器上时,它无法加载图像。 请帮我解决这个问题。 这是我的图像定序器代码: ...

10 使用线程从URL加载图像以及如何在dealloc上取消线程

伙计们,您能帮我提供一个很好的例子,还是一个应该从那里开始的销售线索,或者为此操作使用合适的google关键字。 我想开始学习iPhone中的线程,但是我不知道如何开始,因为我不知道要搜索的正确术语或关键字。 如果您有一个例子,这个例子是最好的。 脚步 : 我想加载很 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM