大きな画像がロードされるまで待つAjax

Question

Ajaxを使用して大きな画像を段階的にロードする必要があります。次のイメージが完全にロードされたときにのみ最後のイメージをフェードアウトさせたい。

すべての実際のブラウザでいくつかのソリューションを確認しましたが、何も動作していないようです。

だから、これは私が今持っているものです。

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

このAjaxの機能負荷が実際の画像（パス）のonClickし、また次のイメージパス：

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

このロード#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; 
} 

詳細については、

Answer 2

画像にonLoadハンドラを添付し、そこから前の画像の削除/フェードをトリガする必要があります。ような何か：

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

Answer 3

代わりのsuccessであなたのロジックを書いて、あなたはjQueryさんcompleteで書くことができます。

完全
型：Function（jqXHR jqXHR、文字列textStatus）

要求が終了呼び出される関数（成功と エラーコールバックが実行された後）。