Ajax attendre jusqu'à ce que la grande image est chargée

Question

j'ai besoin de charger gros imges étape par étape en utilisant Ajax. Je souhaite masquer la dernière image uniquement lorsque l'image suivante est entièrement chargée.

J'ai vérifié plusieurs solutions dans tous les navigateurs actuels, mais rien ne semble fonctionner.

Voilà donc ce que j'ai maintenant:

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

Cette fonction charge Ajax onclick l'image réelle (chemin) et aussi le chemin suivant de l'image:

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

Cette charge le chemin d'image suivant, ajoutez-le à #imgToShow et supprimez l'ancienne image MAIS cela scintille dans le navigateur parce que l'ancienne image est supprimée avant ou pendant que l'image suivante est en cours de chargement.

Pour toute aide, je serai très reconnaissant

Answer 1

Avant de charger, vous devez masquer l'image, vous devez donner un peu fondu en vigueur après l'image de charge

<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+'">'); 
     } 
    } 
}); 

dans votre CSS

#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; 
} 

Pour plus de détails, vous pouvez vérifier le violon https://jsfiddle.net/rm1sxo3u/

Answer 2

Vous Vous devez attacher un gestionnaire onLoad à l'image et déclencher le retrait/le fondu de l'image précédente à partir de là. Quelque chose comme:

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

Answer 3

Au lieu d'écrire votre logique success, vous pouvez écrire dans l » completejQuery.

complet
Type: Fonction (jqXHR jqXHR, String textStatus)

Une fonction à appeler lorsque les finitions de demande (après le succès et callbacks d'erreur sont exécutés).