Question

我想使用javascript在网页中动态插入图片。最简单的方法当然是更新元素的'src'标签。但是，图像实际上是动态生成的PNG，每次生成它需要大约15秒。如果我只是更新'img'标签，我担心不耐烦的用户会认为网址已经死了并且在显示之前离开了页面，因此我想显示一个加载程序。

为了能够显示加载器，我必须通过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';
    });
});

Answer 2

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

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

使用$（window）.load来检测页面中所有元素（包括图像）的加载时间。根据您的需要，这可能适合也可能不适合。
有snippet in github的链接，带有$（）。imagesLoaded函数，主要是解决此问题的黑客攻击。

Answer 3

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

这还应该涵盖浏览器没有为缓存图像触发加载事件的问题。

Answer 4

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

我希望它能奏效。

使用Ajax下载（二进制）映像

4 个答案: