큰 이미지가로드 될 때까지 Ajax 대기

Question

Ajax를 사용하여 단계적으로 큰 이미지를로드해야합니다. 다음 이미지가 완전히로드 된 경우에만 마지막 이미지를 페이드 아웃하고 싶습니다.

모든 실제 브라우저에서 여러 가지 솔루션을 확인했지만 아무 것도 작동하지 않는 것 같습니다.

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

이 부하 :

이 아약스 기능로드

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

실제 이미지 (경로)도 다음 이미지 경로를 온 클릭 :

그래서 이것은 내가 지금 가지고있는 것입니다 다음 이미지 경로를 #imgToShow에 추가하고 이전 이미지를 제거하십시오. 그러나 이미지가로드되기 전이나 이전에 이전 이미지가 제거 되었기 때문에 브라우저에서 깜박입니다. 난 당신이 이미지를 숨길 수있다 넣기 전에

Answer 1

매우 감사하게 될 것입니다 어떤 도움

, 당신은 당신의 CSS에 부하 이미지

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

후 효과에 약간의 페이드를 줄 필요가

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

자세히 알아보기 위해 바이얼을 확인할 수 있습니다. https://jsfiddle.net/rm1sxo3u/

Answer 2

onLoad 핸들러를 이미지에 첨부하고 거기에서 이전 이미지의 제거/페이드를 트리거해야합니다. 같은 뭔가 :

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

Answer 3

대신 success에 로직을 작성, 당신은 jQuery의 complete에 쓸 수 있습니다.

완전한
유형 : 기능 (jqXHR jqXHR, 문자열 textStatus)

함수

이 요청 완료 (성공 후와 오류 콜백이 실행되는) 때 호출된다.