取消 html5 浏览器中的单张图片请求

Question

我正在动态加载（大）图像以绘制到 html5 画布中，如下所示：

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
• 将image tag 附加到iframe 中的body
• img.onload 完成后，您可以使用该图像 dom 元素通过drawImage() 绘制到 html5 画布
• 如果您想取消加载，请在iframe 的contentWindow 上发出stop()（或在IE 中contentDocument 上发出execCommand("stop", false)）。
• 取消图片加载后，您可以重复使用 iframe 来加载更多图片。

我为此创建了一个类，并将coffeescript 代码（以及已编译的javascript）放在github 上： Cancelable Html5 Image Loader

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

Answer 2

您可以尝试 window.stop() 来停止所有请求，但不能停止单个请求。在 IE 中，不是 window.stop()，而是 document.execCommand("Stop", false)。

如果您在请求方面有其他事情要做，那么这样做会干扰它。 （你会跟进重新请求你仍然想要的资源，但这太像辛苦了）。

---

因此，如果您想停止对大图像的单个请求，您可以将图像加载到隐藏的 IFRAME 内的文档中。 IFRAME 的 onload 事件可用于将图像加载到主文档中，此时它应该被缓存（假设您已经配置了缓存指令）。

如果图像花费的时间过长，那么您可以访问 IFRAME 的 contentWindow 并对其发出停止命令。

您需要拥有与可以同时请求的图像一样多的 IFRAME 元素。

Answer 3

我怀疑是否有一种跨浏览器的方法可以在没有黑客攻击的情况下实现这一点。一个建议是向服务器端脚本发出 AJAX 请求，该脚本返回图像的 Base64 编码版本，然后您可以将其设置为 src 属性。然后，如果您决定取消加载图像，则可以取消此请求。但是，如果您想逐步显示图像，这可能会很困难。

Answer 4

其实我也有同样的问题，做了一些测试。

我用 iframes 做了一些测试，并取得了一些成功。在 Firefox 3.6 和 Chrome 上测试。对于测试，我使用了 9 张 15Mb 的图像。使用 img 预加载我多次杀死了我的 firefox（是的，这台计算机上没有太多记忆），如果请求已经开始，使用 img 的“暂停”操作不会阻止图像加载，使用 iframe 的暂停操作真的会停止下载（因为我删除 iframe）。下一步将使用 XMLHttpRequests 进行测试。由于我的测试代码的这个版本使用图像 url 中的 braowser 缓存行为来防止第二次加载，这也适用于 ajax 请求。但也许使用 iframe，我可以找到一种直接从 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/