假设在 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. 加载了一个小图像,但在开发人员面板中观看网络并注意大图像继续下载。

#1楼 票数:30 已采纳

快速回答

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

细节

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

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


旧答案(2011)

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

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

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

#2楼 票数:4

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

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

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

#3楼 票数:2

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

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

......

//cancel load
img.src = '';

#4楼 票数:2

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

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

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

#5楼 票数:0

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

#6楼 票数:0

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

用:

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

(见这里

#7楼 票数:0

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

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

#8楼 票数:0

这对我有用:

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

  ask by eeejay translate from so

未解决问题?本站智能推荐:

1回复

重新加载时仅加载javascript文件一次(本机方式)

有没有一种方法可以确保在重新加载HTML文件(引用此javascript文件)时仅一次加载javascript文件? 例如: 我希望这个命令是这样的: 类似于PHP命令include_once()... ...是否有本机方法(通过本机脚本标签)? 还是只有像jQue
5回复

如何在加载大图像时显示加载图像?

如何在加载大图像时显示加载图像? 作为在Orkut中查看用户相册中的照片的示例,在照片完全加载之前,在照片上显示加载图像。 我需要实现该功能。 我的问题是如何实现该功能? 是否可以不使用JQuery? 请帮忙。
1回复

谷歌地图加载图像,如

我开始创建一个脚本,允许我将大图像分成小块,进行缩放、拖动等。 我想知道在谷歌地图(可见)等活动区域加载小图像的可能性有哪些。 我想尝试用一些计算来确定一个元素的大概位置,并用 document.elementFromPoint 来确定元素,但这不是跨浏览器的解决方案。 另一种解决方案可能是:从
1回复

防止图像加载

我正在寻找一种防止图像加载的方法。 我创建了2个按钮,一个按钮用于previous图像,另一个按钮用于next图像。 当用户单击next按钮时,我只需更改图像的src并显示下一个URL。 问题是当用户单击next按钮的速度足够快时。 src将被多次更改,并且仍将加载所有正在传递的sr
1回复

jQuery图像加载功能

负载函数调用从来没有...我知道我可能是不正确执行此操作,但一旦图像加载完毕后重新调整它的包装自动那么我需要抓住的尺寸。 有人可以帮忙吗?
2回复

脚本和图像加载器

我的HTML页面很笨重,其中包含几兆字节的图像和脚本。 我想显示使用Flash之类的JavaScript的加载程序-带有进度栏和百分比。 是否有任何带输入的库:URL数组(js脚本和图像),在加载某些内容时会进行回调。 我知道资源的大小,因此我可以进行进度栏。 如果加载器库很轻或
1回复

快速以HTML加载图像

我有1 MB的图像,我想放在背景上。 我看到图像加载时间太长。 要在我的背景中放置这张图片但要快速加载怎么办? 图像是.PNG。
1回复

如何缩短此图像加载过程?

此代码为javascript应用程序加载图片: 我想找出一种方法,使每个使用的图像不使用四行代码。 我使用了答案建议的这种方式(除非我做错了): 图像未成功加载,并且在代码中不同位置的if语句中对sampleImage.ready进行了评估时,返回了一条错误消息: 无