Ajax warte, bis das große Bild geladen ist

Question

Ich muss große Imges Schritt für Schritt mit Ajax laden. Ich möchte das letzte Bild nur ausblenden, wenn das nächste Bild vollständig geladen ist.

Ich habe mehrere Lösungen in allen aktuellen Browsern überprüft, aber nichts scheint zu funktionieren.

So ist es das, was ich habe jetzt:

<div id="imgToShow"> 
    <img class="imgZoomClass" src="firstimage.jpg"> 

Diese Funktion lädt Ajax Onclick die tatsächliche Bild (Pfad) und auch den nächsten Bildpfad:

$.ajax({ 
    type: "post", 
    url: "../ajax/getImages", 
    cache: true, 
    data: "instance_id=" + $("#instance_id").val() + "&daterange=" + activeRange + "&index=" + slideIndex + "&direction=next&resolution=" + $("#resolution").val(), 
    success: function(json){ 
    var data = jQuery.parseJSON(json); 

     if(data){ 
      $("#imgToShow").append('<img id="imgZoom" class="imgZoomClass" data-index="'+data.index+'" data-time="'+data.time+'" data-date="'+data.date+'" src="'+data.path+'">'); 
      $(".imgZoomClass:first").remove().fadeOut(); 
     } 
    } 
}); 

Diese Lasten den nächsten Bildpfad, anhängen an #imgToSchauen und entfernen Sie das alte Bild ABER es flackert im Browser, weil das alte Bild vor oder während dem nächsten Bild entfernt wird.

Für jede Hilfe i

Answer 1

Vor dem Laden müssen Sie verstecken Bild sehr dankbar sein wird, müssen Sie

<div id="imgToShow"> 
    <img class="imgZoomClass" src="firstimage.jpg" onload="fadeIn(this)" /> 
</div 

// fade in effect function 
window.fadeIn = function(obj) { 
    $(obj).fadeIn(1000, function(){ 
     $("#imgToShow").find(".imgZoomClass").not($(obj)).remove(); 
    }); 
} 

$.ajax({ 
    type: "post", 
    url: "../ajax/getImages", 
    cache: true, 
    data: "instance_id=" + $("#instance_id").val() + "&daterange=" + activeRange + "&index=" + slideIndex + "&direction=next&resolution=" + $("#resolution").val(), 
    success: function(json){ 
    var data = jQuery.parseJSON(json); 

     if(data){ 
      $("#imgToShow").append('<img id="imgZoom" onload="fadeIn(this)" style="display:none;" class="imgZoomClass" data-index="'+data.index+'" data-time="'+data.time+'" data-date="'+data.date+'" src="'+data.path+'">'); 
     } 
    } 
}); 

in Ihrem CSS etwas verblassen in der Tat nach Belastung Bild geben

#imgToShow 
{ 
    position: relative; 
    width: 400px; // set custom width as you need 
    height: 400px; // set custom height as you need 
    border: 3px solid #000; 
} 

#imgToShow .imgZoomClass 
{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 

Für weitere Details können Sie überprüfen, Fiedel https://jsfiddle.net/rm1sxo3u/

Answer 2

Sie sollte einen onLoad Handler an das Bild anhängen und das Entfernen/Ausblenden des vorherigen Bildes von dort auslösen. Etwas wie:

$(".imgZoomClass:last").on('load', function() { 
    $(".imgZoomClass:first").remove().fadeOut(); 
}); 

Answer 3

Statt Schreiben Sie Ihre Logik in success, können Sie in jQuery ‚s complete schreiben.

komplette
Typ: Funktion (jqXHR jqXHR, String textStatus)

Eine Funktion, die aufgerufen werden, wenn die Anforderung beendet ist (nach dem Erfolg und Fehler Rückrufe werden ausgeführt).