在html5浏览器中取消单个图像请求

Question

我正在动态加载(大)图像以绘制到html5画布,如下所示:

var t = new Image();
t.onload = ...
t.src = 'http://myurl';

但每隔一段时间就想完全取消图像请求.

只有这样,我来到了被设置src到''.即

t.src = ''

这适用于许多浏览器,但似乎只有Firefox实际上取消了对图像的http请求.

我通过禁用缓存并启用"模拟调制解调器速度"来测试Fiddler2.然后运行小提琴来测试取消图像请求.(我很想听听关于如何测试这个的其他想法)

我知道有办法取消所有请求(如在这个问题中),但我只想取消一个.

有关其他方式(特别是在移动浏览器上)的任何想法吗？

Answer 1

这是我设法让它在所有现代浏览器(Chrome,Safari,Mobile-Safari,Firefox和IE9)中运行的唯一方式.

• 加载空并隐藏 iframe
• 追加了image tag对body在iframe
• 当img.onload完成时,您可以使用图像DOM元素提请与HTML5画布drawImage()
• 如果要取消的负荷,发出stop()对iframe的contentWindow(或execCommand("stop", false)在contentDocumentIE中).
• 取消图像加载后,您可以重复使用iframe加载更多图像.

我为此创建了一个类,并将coffeescript代码(以及它的编译javascript)放在github上: Cancelable Html5 Image Loader

如果你想玩它,我还创建了一个jsfiddle来测试它.记得启动Fiddler2(或类似的东西),看看实际的网络请求是否真的被取消了.