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/

可能有另一種方法來解決這個問題，但這是第一個想到的解決方案。