使用 Ajax 下载（二进制）图像答案

【问题标题】：Download (binary) image using Ajax使用 Ajax 下载（二进制）图像
【发布时间】：2011-09-04 05:05:01
【问题描述】：

我想使用 javascript 在网页中动态插入图像。当然，最简单的方法就是更新元素的“src”标签。但是，图片实际上是动态生成的PNG，每次生成大约需要15秒。如果我只是更新'img'标签，恐怕不耐烦的用户会认为url死了，在它显示之前离开页面，所以我想显示一个加载器。

为了能够显示加载器，我必须通过 Ajax 下载图像，然后插入到文档中。这可能吗？我尝试先做一个 Ajax 请求，然后当它成功时更新 img src 标签，希望浏览器足够聪明，不会重新下载图像，但显然情况并非如此。

是否有任何解决方法可以在不引入新的服务器代码的情况下控制 img 的 http 请求？

【问题讨论】：

我使用load() 技术发布了一个答案，但是jQuery 手册对图像上的load() 事件有很多不好的说法：api.jquery.com/load-event

标签： html ajax image jquery

【解决方案1】：

当页面加载时，您可以显示一些代表加载进度的虚拟图像：

<img src="loader.gif" id="myimg" />

然后将其替换为实际的动态图像：

$(function() {
    $('#myimg').load(function() {
        $(this).unbind('load');
        this.src = '/script/dynamicimage';
    });
});

【讨论】：

这听起来是最好的方法，因为它不依赖于load 事件的可靠性，它依赖于isn't。我不明白你为什么将它包装到“请稍候”图像的加载事件中？
@Pekka，我将它包装在“请稍候”图像的加载事件中，因为我在 document.ready 中执行此操作时只保证加载 DOM，而不是图像，这将确保用户在修改其src 属性之前会看到进度图像。如果你在他看到实际加载图像之前就这样做了。
但是看到加载图像本身没有任何价值，不是吗？使用load 事件可能会因为jQuery docs on load() 中列出的原因之一而无法触发（例如在Webkit 中，当图像被缓存时）。您的解决方案的核心需要依赖于load()，这就是为什么我认为它是唯一值得的 - 如果你没有使用@987654330 @

【解决方案2】：

您可以显示加载器，然后使用 Ajax 请求将慢速图像下载到隐藏标签中，然后在加载时隐藏加载器并显示 img。

编辑： 正如 Pekka 所指出的， load() 是不可靠的，所以这是不行的。 This post 处理同样的问题，提供了两种可能的解决方案：

使用 $(window).load 来检测页面中的所有元素（包括图像）何时已加载。这可能适合也可能不适合，具体取决于您的需求。
有一个指向带有 $().imagesLoaded 函数的snippet in github 的链接，该函数主要是解决此问题的技巧。

【讨论】：

加载事件并不完全可靠。请参阅api.jquery.com/load-event中的警告

【解决方案3】：

目前还不清楚您要做什么，但是...
1.首先，将加载事件处理程序附加到您的图像标签，您要将其 src 设置为新创建的图像。例如，让这个 img 标签加载加载器动画，或者只为那个使用另一个标签。
2.然后向生成动态图像的服务器脚本发出 AJAX 请求。
3.在AJAX调用成功回调时，将前面提到的img标签的src设置为服务器刚刚创建的图像。请记住，图像在服务器上生成需要时间这一事实并不意味着浏览器不会花费自己的时间来加载它。
这就是我们之前将加载事件处理程序附加到它的原因。
另外，如果您使用了单独的 DOM 元素，请隐藏加载器。

这也应该涵盖浏览器不触发缓存图像的加载事件的问题。

【讨论】：

加载事件并不完全可靠。请参阅api.jquery.com/load-event中的警告
加载事件会导致从 HTML 加载的图像出现问题，但在一些浏览器（FF、IE、Chrome）上对此进行了实验，我可以说在更改 src 之前附加加载事件图像不应导致缓存图像出现问题。然而，其余关于冒泡和设置与以前相同的 src 的警告仍然适用。

【解决方案4】：

发送 ajax 请求以下载图像并显示加载动画。
在服务器端，收到请求后，创建图像并将其保存在临时位置。
向浏览器发回图像路径的ajax响应。
改变通过ajax得到的图片的src属性。

我希望它会起作用。

【讨论】：