我正在动态加载（大）图像以绘制到 html5 画布中，如下所示：
var t = new Image();
t.onload = ...
t.src = 'http://myurl';
但每隔一段时间就想彻底取消图像请求。
我想出的唯一方法是设置src为''. IE
t.src = ''
这适用于许多浏览器，但似乎只有 Firefox 实际上取消了对图像的 http 请求。
我通过禁用缓存和启用“模拟调制解调器速度”使用Fiddler2对此进行了测试。然后运行小提琴来测试取消图像请求。（我很想听听其他关于如何测试这个的想法）
我知道有多种方法可以取消所有请求（如本问题所示），但我只想取消一个。
关于其他方式（尤其是在移动浏览器上）的任何想法？
这是我设法让它在所有现代浏览器（Chrome、Safari、Mobile-Safari、Firefox 和 IE9）中工作的唯一方法。
iframeimage tag对body在iframeimg.onload完成时，您可以使用图像DOM元素提请与HTML5画布drawImage()stop()对iframe的contentWindow（或execCommand("stop", false)在contentDocumentIE中）。我为此创建了一个类，并将 coffeescript 代码（它是编译的 javascript）放在 github 上： Cancelable Html5 Image Loader
如果你想玩它，我还创建了一个jsfiddle 来测试它。请记住启动 Fiddler2（或类似的东西）以查看实际的网络请求是否真的被取消了。
您可以尝试 window.stop() 停止所有请求，但不能停止单个请求。在 IE 中，它不是 window.stop() 而是 document.execCommand("Stop", false)。
如果您在请求方面有其他事情要做，那么这样做会干扰它。（您会跟进重新请求您仍然需要的资源，但这太像艰苦的工作了）。
因此，如果您想停止对大图像的单个请求，您可以做的是将图像加载到隐藏 IFRAME 内的文档中。IFRAME 的 onload 事件可用于将图像加载到主文档中，届时它应该被缓存（假设您配置了缓存指令来这样做）。
如果图像花费的时间太长，那么您可以访问 IFRAME 的 contentWindow 并对其发出停止命令。
您需要拥有与可以同时请求的图像一样多的 IFRAME 元素。
我怀疑是否有一种跨浏览器的方式可以在没有黑客的情况下实现这一点。一个建议是向服务器端脚本发出 AJAX 请求，该脚本返回图像的 Base64 编码版本，然后您可以将其设置为src属性。如果您决定取消加载图像，则可以取消此请求。但是，如果您想逐步显示图像，这可能会很困难。
我实际上有同样的问题并做了一些测试。
我已经用iframe进行了一些测试并取得了一些成功。在 Firefox 3.6 和 Chrome 上测试。对于测试，我使用了9 张 15Mb 的图像。通过 img 预加载，我多次杀死了我的 Firefox（是的，这台计算机上没有太多内存），如果请求已经开始，使用 img 的“暂停”操作不会阻止图像加载，而 iframe 的暂停操作确实会停止下载（因为我删除 iframe）。下一步将使用XMLHttpRequests进行测试。由于我的这个版本的测试代码使用了图像 url 中的 braowser 缓存行为来防止第二次加载，这也适用于 ajax 请求。但也许使用 iframes 我可以找到一种方法来直接从 iframe 中加载的图像中检索二进制数据（对相同域的 url 有限制）。
这是我的测试代码（在 Chrome 上非常快，可能会用太多非常大的图像杀死您的 Firefox）：
// jQuery.imageload.shared.list contains an array of oversized images url
jQuery.each(imglist,function(i,imgsrc) {
name = 'imageload-frame';
id = name + "-" + i;
// with img it is not possible to suspend, the get is performed even after remove
//var loader = jQuery('<img />').attr('name', name).attr('id',id);
var loader = jQuery('<iframe />').attr('name', name).attr('id',id);
//no cache on GET query taken from jQuery core
// as we really want to download each image for these tests
var ts = +new Date;
// try replacing _= if it is there
var ret = imgsrc.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2");
// if nothing was replaced, add timestamp to the end
imgsrc = imgsrc + ((ret == imgsrc) ? (imgsrc.match(/\?/) ? "&" : "?") + "_=" + ts : "");
loader.css('display', 'none').appendTo('body');
loader.after( jQuery('<a>')
.text(' stop ')
.attr('href','#')
.click(function(){
loader.remove();
jQuery(this).text(' suspended ');
})
);
// start the load - preload
loader.attr('src',imgsrc);
// when preload is done we provide a way to get img in document
loader.load(function() {
jQuery(this).next("a:first")
.text(" retrieve ").unbind('click')
.click(function() {
var finalimg = jQuery('<img />');
// browser cache should help us now
// but there's maybe a way to get it direclty from the iframe
finalimg.attr('src',loader[0].src);
finalimg.appendTo('body');
});
});
});
编辑，这里是 fillde 来测试它：http : //jsfiddle.net/wPr3x/