html - 使用 Ajax 下载(二进制)图像

Question

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

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

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

Answer 1

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

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

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

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