6

我正在编写一个 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 发送的二进制图像数据？

4

3 回答 3

3

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

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

于 2010-02-25T01:56:31.707 回答
2

试试例如

this.src="data:image/png;base64,XXX"

...XXX您的二进制数据在哪里，base64 编码。必要时调整内容类型。不过，我不会对广泛的浏览器支持感到乐观。

于 2010-02-25T01:42:21.410 回答
0

您应该能够使用data URIs，类似于我在之前的问题中确定的解决方案。请注意，这不适用于旧版浏览器。

于 2010-02-25T01:42:51.440 回答