javascript - 取消html5浏览器中的单图请求

Question

我正在动态加载(大)图像以绘制到 html5 Canvas 中，如下所示:

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

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

我想到的唯一方法是将 src 设置为 ''。即

t.src = ''

这在许多浏览器中都有效，但似乎只有 Firefox 真正取消了图像的 http 请求。

我用 Fiddler2 对此进行了测试通过禁用缓存并启用“模拟调制解调器速度”。然后运行a fiddle to test canceling a image request. (我很想听听有关如何测试此功能的其他想法)

我知道有多种方法可以取消所有请求 ( as in this question )，但我只想取消一个。

关于其他方法(尤其是在移动浏览器上)有什么想法吗？

Answer 1

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

• 加载一个空且隐藏的iframe
• 将图像标签附加到iframe中的body
• 当 img.onload 完成时，您可以使用该图像 dom 元素通过 drawImage() 绘制到 html5 Canvas
• 如果您想取消加载，请在 iframe 的 contentWindow 上发出 stop()(或 execCommand( "stop", false)(在 IE 中的 contentDocument 上)。
• 取消图像加载后，您可以重新使用 iframe 来加载更多图像。

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

如果你想玩一下，我还创建了一个 jsfiddle to test it out 。请记住启动 Fiddler2(或类似的东西)以查看实际的网络请求是否真的被取消。