如何从可中止的AJAX请求返回二进制图像数据并将结果设置为HTML/DOM图像的src？

Question

我正在编写一个Web应用程序,它涉及在网页上创建(和删除)大量图像的连续循环.每个图像由服务器动态生成.

var img = document.createElement("img");
img.src = "http://mydomain.com/myImageServer?param=blah";

在某些情况下,其中一些图像在完成下载之前比它们的实用性更长.那时,我从DOM中删除它们.

问题是浏览器即使在从DOM中删除后仍继续下载这些图像.这造成了瓶颈,因为我有新的图像等待下载,但他们必须等待旧的不需要的图像先完成下载.

我想中止那些不需要的图像下载.显而易见的解决方案似乎是通过AJAX请求二进制图像数据(因为AJAX请求可以中止),并在下载完成后设置img.src:

// Code sample uses jQuery, but jQuery is not a necessity

var img = document.createElement("img");

var xhr = $.ajax({
        url: "http://mydomain.com/myImageServer?param=blah",
        context: img,
        success: ImageLoadedCallback
    });

function ImageLoadedCallback(data)
{
    this.src = data;
}

function DoSomethingElse()
{
    if (condition)
        xhr.abort();
}

但问题是这条线路没有按照我希望的方式工作:

this.src = data;

我搜索过高低.有没有办法将图像源设置为通过AJAX发送的二进制图像数据？

Answer 1

您必须将其进行 base64 编码data为data:URI才能实现此目的。但它在 IE6-7 中不起作用，并且可以放入的数据量有限制，尤其是在 IE8 上。作为支持它的浏览器的优化，这可能是值得的，但我不会依赖它。

另一种可能的方法是使用XMLHttpRequest预加载图像，然后丢弃响应并将src新的响应设置Image为指向相同的地址。图像应该从浏览器的缓存中加载。但是，在动态生成图像的情况下，您需要注意缓存标头以确保响应是可缓存的。