jquery Bild von PHP-Skript laden dann anzeigen

Question

Ich habe für diesen Fall gesucht und kam in der Nähe, aber ich habe ein Problem, es zu beenden.

Ich habe ein PHP-Skript, das ein Diagramm erstellt. Dazu erstellt man einen Png-Img und verwendet dann die Kopfzeile, um das Bild auf der Seite anzuzeigen.

Ich kann so etwas wie tun:

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

und das funktioniert. Das Problem ist, ich habe einige Graphen, die eine ganze Weile brauchen, um zu erstellen, ab einer Minute, und während das passiert, ist das Bild einfach leer und die Webseite sieht so aus, als würde sie nichts tun.

Ich habe einen Weg gefunden, das Bild vor zu laden, aber keine Möglichkeit, es auf die Webseite anzuwenden (tatsächlich vom Stack-Überlauf). Ich kann tun:

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

Also meine Frage ist, kann ich das Bild in einer Art und Weise, wie diese laden und zu einem bestehenden Bild auf der Seite irgendwie anwenden? Ich bin nicht sicher, ob dieser Satz sehr klar ist .... Ich vermisse das Stück, wo ich tatsächlich ein vorinstalliertes Bild aus einem Skript anzeigen kann. Ich möchte vermeiden, das Bild zu speichern oder iframes wenn möglich zu verwenden.

Tanks für jede Hilfe.

Answer 1

Sobald das Image geladen wurde, setzen Sie das Image src auf denselben Speicherort, den Sie im Hintergrund geladen haben, und es wird (theoretisch) aus dem Cache abgerufen und dem Benutzer angezeigt.

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

Hier ist ein Beispiel, das ich zusammengestellt habe. Es lädt zuerst ein Bild auf die Seite und lädt dann ein anderes Bild hinter die Kulissen. Wenn Sie die Warnmeldung bestätigen, werden die Bilder durch Ändern der Meldung ausgetauscht. Ich habe bestätigt, dass das Bild mithilfe der Chrome-Tools aus dem Cache abgerufen wird. http://jsfiddle.net/uVFLD/1/

Möglicherweise gibt es einen anderen Weg, um dieses Problem zu lösen, aber das war die erste Lösung, die in den Sinn kam.