jquery PHPスクリプトの画像をプリロードしてから表示する

Question

このケースを検索して終了しましたが、問題は終了しています。

グラフを作成するPHPスクリプトがあります。 png imgを作成し、ヘッダーを使用してイメージをページに表示することでそうすることができます。

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

そして、この作品：

私のような何かを行うことができます。問題は、作成するのにかなりの時間がかかるグラフがあり、それが起こっている間に画像が空白になり、何もしないように見えるということです。

私はイメージをプリロードする方法を見つけましたが、実際にはスタックオーバーフローからWebページに適用する方法はありませんでした。私が行うことができます。

$('<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..."); 
    } 
});​ 

ここに私がまとめた例があります。最初にページ上に1つの画像をロードし、その後に別の画像をロードします。アラートメッセージを確認すると、srcを変更してイメージをスワップします。私はそれがChrome devツールを使ってキャッシュからイメージを引っ張ることを確認しました。 http://jsfiddle.net/uVFLD/1/

この問題を解決する別の方法があるかもしれませんが、それが思い浮かぶ最初の解決策でした。