Div in AJAX Response ersetzen, bevor an DOM angehängt werden

Question

Ich erstelle einen AJAX-Übergang zwischen Seiten mit einem Heldenbild, das auf beiden Seiten gleich bleibt. Nachdem ich auf einen Link geklickt habe, zentriere ich das Bild, füge das neue HTML hinzu und fade das mittlere Bild aus. Das Problem ist, sogar bei einem zwischengespeicherten Bild (es ist die gleiche Datei) sehe ich das Bild plötzlich im Hintergrund (von AJAX Antwort, Rendering nach dem Anhängen an DOM) beim Ausblenden des Bildes auf der Vorderseite.

Auch wenn Sie das Ausblenden des Bildes vorne etwas verzögern, ist das Bild auf der Rückseite noch nicht fertig. (Wahrscheinlich dauert das Rendern mehr Zeit).

Meine Optionen wäre es zu warten, bis das Ajax Image Div komplett gerendert ist (was ich nicht weiß), oder - und das möchte ich versuchen: Ersetzen (Kopieren) Bild in der AJAX-Antwort, bevor Sie es dem DOM hinzufügen.

Ist das überhaupt möglich und hilft es, die Leistung zu verbessern? Ich werde auch versuchen, das div sofort nach dem Ersetzen des Inhalts durch die AJAX-Antwort zu ersetzen.

Alle Hinweise sind immer noch sehr willkommen.

prost

Answer 1

Sie könnten die CSS z-index Eigenschaft, so dass das obere Bild auf der Oberseite bleibt. Stellen Sie einen Ereignis-Listener ein, wenn das darunter liegende Bild geladen ist, können Sie das obere Bild ausblenden.

$('#bottom-img').on('load', function() { 
    $('#top-img').fadeOut(); 
}); 

Answer 2

Gut danke für die Antwort. Das habe ich gemeint. Dies würde erfordern einige warten auf das Bild zu beenden, laden und dann fadeOut das oberste Bild. Aber ich habe eine bessere Lösung:

Da die beiden Bilder genau gleich sind, ersetze ich den Inhalt in der Rückseite (Ajax-Antwort), und sofort nachdem ich das Bild oben in die Ajax-Antwort kopieren (so ersetze ich die Bild mit einem bereits geladenen).

Dann fade ich sofort aus. Das gibt mir einen sehr glatten Übergang und die Kehrseite des «Warten bis Laden» ist weg.

(Im Vergleich zu meiner ersten Frage, wo ich vor Zugabe zu dem DOM, füge ich jetzt an den DOM und manipuliere, um sie sofort. Das Bild innerhalb der Ajax-Antwort ersetzen wollte)

Danke trotzdem. Cheers