Question

我已经四处寻找这个案子并且已经接近但我在完成它时遇到了问题。

我有一个创建图表的PHP脚本。它通过创建一个png img然后使用标题将图像显示到页面来实现。

我可以做类似的事情：

$('#img').attr('src', 'url.php?make_graph=1');

这很有效。问题是，我有一些图表需要很长时间来创建，超过一分钟，而当发生这种情况时，图像只是空白，网页看起来像什么都没做。

我找到了预加载图片的方法，但没有办法将其应用到网页上（实际上来自堆栈溢出）。我能做到：

$('<img/>', {
    'src': 'url.php....',
    'load': function(){ alert("loaded!"); }
});

所以我的问题是，我可以以这样的方式加载图像并以某种方式将其应用于页面上的现有图像吗？我不确定那个句子是否非常清楚......我错过了我可以实际显示由脚本制作的预装图像的部分。我想避免保存图片或尽可能使用iframe。

坦克提供任何帮助。

Answer 1

加载后，将图像src设置为您在幕后加载的相同位置，它（理论上）将从缓存中拉出并显示给用户。

$("<img>", {
    "src": "url.php...",
    "load": function() {
        alert("loaded!");
        $("#foo").attr("src", "url.php...");
    }
});

这是我放在一起的一个例子。它最初在页面上加载一个图像，然后在幕后加载不同的图像。确认警报消息后，它将通过更改src来交换图像。我确认它使用Chrome开发工具从缓存中提取图像。 http://jsfiddle.net/uVFLD/1/

可能有另一种方法可以解决这个问题，但这是第一个想到的解决方案。