var t = new Image();
t.onload = ...
t.src = 'http://myurl';
但有时候我想完全取消图片请求。
我找到的唯一方法是将src设置为''。即：
t.src = ''
这在许多浏览器中都有效，但似乎只有Firefox实际上取消了图片的http请求。
我使用Fiddler2进行测试，禁用缓存并启用“模拟调制解调器速度”。然后运行一个fiddle来测试取消图片请求。（我很想听听其他测试方法）
我知道有一些方法可以取消所有请求（就像这个问题中提到的那样），但我想只取消一个请求。
您有没有其他方法（尤其是在移动浏览器上）可以做到这一点？
这是我成功在所有现代浏览器（Chrome、Safari、Mobile-Safari、Firefox 和 IE9）中让其工作的唯一方法：
iframeimage tag 添加到 iframe 中的 bodyimg.onload 完成时，您可以使用该图像 dom 元素使用 drawImage() 绘制到 html5 画布上iframe 的 contentWindow 上发出 stop()（或者在 IE 中，在 contentDocument 上执行 execCommand("stop", false)）。我为此创建了一个类，并将 coffeescript 代码（及其编译后的 javascript）放在了 Github 上：Cancelable Html5 Image Loader
如果您想尝试它，我还创建了一个 jsfiddle 来测试它。请记住启动 Fiddler2（或类似的工具）以查看实际的网络请求是否被真正取消。
我实际上也遇到了同样的问题，并进行了一些测试。
我使用 iframes 进行了一些测试，并且取得了一些成功。在 Firefox 3.6 和 Chrome 上进行了测试。对于这些测试，我使用了 9 张大小为 15Mb 的图片。使用 img 预加载会使我的 firefox 崩溃数次（是的，在这台电脑上内存不多），使用 img，“suspend” 操作并不能阻止图片加载，如果请求已经开始，而使用 iframes，“suspend” 操作可以真正停止下载（因为我删除了 iframe）。下一步将测试 XMLHttpRequests。由于这个版本的测试代码使用了浏览器缓存行为来防止图像 url 的第二次加载，并且这也适用于 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/
use_unique_name，那么您将看到在第一次加载整个页面后，图像被缓存了。 - Amirloader.onload = 而不是 jQuery 的 load()。但这里有一个使用 jQuery 方法的 fiddle，它有同样的问题：http://jsfiddle.net/amirshim/na3UA/1/ - Amir我怀疑没有一种跨浏览器的方法可以在不使用hack的情况下实现这一点。一个建议是向服务器端脚本发出AJAX请求，该脚本返回一个Base64编码版本的图像，您可以将其设置为src属性。然后，如果您决定取消加载图像，则可以取消此请求。不过，如果您想逐步显示图像，这可能会很困难。
t.src = ''，规范对应该发生什么并不明确。请参见http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/。 - Crescent Freshsrc=''图像。在Firefox下，设置t.src=null也会取消请求，但在其他浏览器上不起作用。较新的（当前工作中的）规范在某些情况下表明它应该触发onerror...有点这样。 - Amirsrc设置为内联图片也会取消先前的请求：t.src='data:image/gif;base64,R0lGOD...可以在这个fiddle中查看。 - Amir