在html5浏览器中取消单一图片请求 [英] Cancel single image request in html5 browsers

问题描述

我正在加载（大）图片动态绘制到html5画布，类似这样：

I'm loading (large) images dynamically to draw into a html5 canvas, something like this:

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

但每隔一段时间都会想要完全取消图片要求 。

But every once in a while would like to cancel the image request completely.

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

The only way I came up with is setting src to ''. i.e.

t.src = ''

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

This works in many browsers, but it seems that only Firefox actually cancels the http request for the image.

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

I tested this with Fiddler2 by disabling caching and enabling "emulate modem speed". Then running a fiddle to test canceling a image request. (I'd love to hear other ideas on how to test this)

我知道有办法取消所有要求（，如这个问题），但我只想取消一个。

I know there are ways to cancel all requests (as in this question), but I'd like to only cancel one.

有关其他方式的建议（特别是在移动浏览器上）吗？

Any ideas on other ways (especially on mobile browsers) to do this?

推荐答案

这是我设法使其在所有现代浏览器（Chrome，Safari，Mobile-Safari，Firefox和IE9）中工作的唯一方法。

This is the only way that I managed to get it to work in all modern browsers (Chrome, Safari, Mobile-Safari, Firefox, and IE9).

• 加载空的隐藏 iframe


• 附加 / code>到 iframe


• 中的正文 img.onload 完成后，您可以使用该图像dom元素来绘制一个html5画布与 drawImage（）


• 如果您要取消加载，请在 iframe stop（） c> contentWindow （或 execCommand（stop，false） / $>


• Load an empty and hidden iframe
• append an image tag to the body in the iframe
• when the img.onload completes, you can use that image dom element to draw to an html5 canvas with drawImage()
• if you want to cancel the load, issue a stop() on the iframe's contentWindow (or execCommand("stop", false) on contentDocument in IE).
• after you cancel a image load, you can reuse the iframe to load more images.

我为此创建了一个类，并将coffeescript代码（和它编译的javascript）放在github上：
可取消的Html5图像加载器

I created a class for this, and put the coffeescript code (and it's compiled javascript) on github: Cancelable Html5 Image Loader

如果你想玩它，我还创建了一个 jsfiddle测试。记住要启动Fiddler2（或类似的东西），看看实际的网络请求真的被取消了。

If you want to play with it, I also created a jsfiddle to test it out. Remember to start Fiddler2 (or something like it) to see that the actual network request is really being canceled.

这篇关于在html5浏览器中取消单一图片请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！