jQuery的预加载图像从PHP脚本，然后显示

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/

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