画像の置換

Question

商品のギャラリーでは、アイテム、セリア、または側面の色を選択することができます。各オプションには独自の画像があります。私は画像のSRC-置換を有するこれらのオプションのいずれかをクリックすると、効果のために、私はフェードイン/フェードアウトを使用している、それは次のようになります。

$('button').click(function(){ 
$('img').fadeOut("slow",function(){ 
$(this).attr("src",newSRC); 
$(this).fadeIn("slow"); 
}); 
}); 

が、フェードインが絵を完成したときに描画する時間がありません。、既にキャッシュに読み込まれていて、サイトギャラリのために非常に見ている場合でもintercoms

私はpreCacheのすべての画像を使用できません。メインケースの低い接続部で一日中ロードします。私はアイテムを完全に削除してからロードを使用したいと思いますが、ギャラリーがクラッシュするアイテムを削除することはできません（柔軟なサイトでアイテムを削除できず、すべてが崩壊します）。今私はちょっとしたことをしましたが、... facepalm、申し訳ありません。

だから、最高の解決策は何だと思いますか？

Answer 1

私はそうすぐに（一時的な画像オブジェクトに）クリックで新しいイメージのロードを開始したいです実際にロードを開始するまで待つのではなく、早く（おそらくfadeOutが完了する前に）利用可能になります。それはあなたが実際の画像のSRCを割り当てるときにすぐにロードされ、少ない待ち時間が存在しますので、これは、ブラウザのキャッシュに画像を取得します：

$('button').click(function(){ 
    var imgLoaded = false, fadeDone = false; 
    var fadeTarget = $('img'); 

    // fadeIn the new image when everything is ready 
    function fadeIfReady() { 
     if (imgLoaded && fadeDone) { 
      fadeTarget.attr("src", newSrc).fadeIn("slow"); 
     } 
    } 

    // create temporary image for starting preload of new image immediately 
    var tempImg = new Image(); 
    tempImg.onload = function() { 
     imgLoaded = true; 
     fadeIfReady(); 
    }; 
    tempImg.src = newSrc; 

    // start the fadeOut and do the fadeIn when the fadeOut is done or 
    // when the image gets loaded (whichever occurs last) 
    fadeTarget.fadeOut("slow",function(){ 
     fadeDone = true; 
     fadeIfReady(); 
    }); 
}); 

Answer 2

のように私は、それをフェードインする前にロードするための次の画像を待つでしょう：

var loadFail; 
$('button').click(function(){ 
    $('img').fadeOut("slow",function(){ 
     $(this) 
     .attr("src",newSRC) 
     .load(function(){ 
      $('img').fadeIn("slow"); 
      clearTimeout(loadFail); 
     }); 
     loadFail = setTimeout(function(){ 
      $('img').fadeIn("slow"); 
     }, 4000); 
    }); 
});