圖片替換

Question

在產品庫中，我可以選擇項目，正面或側面的顏色。每個選項都有自己的圖片。當我點擊其中的一個選項我有圖像的SRC-替代，對我使用淡入/淡出的效果，它看起來像：

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

但是當淡入完成的圖片沒有時間畫，即使它已經加載到緩存中，並且它對於網站庫看起來非常奇怪intercoms

我不能使用preCache所有圖像，因爲如果產品數量超過100件，網站會整天裝載，主要情況下連接不足。我想完全刪除物品，然後使用加載，但我無法刪除項目'caz畫廊將崩潰（這是一個靈活的網站，我不能刪除項目，所有將崩潰）。現在我做了一個小小的gif，但是... 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); 
    }); 
});