fadeIn出問題了

你好，我想淡出圖片，然後做一個新的淡入淡出，所以我寫了一個簡單的代碼，但出了點問題，因爲當.photo img fadesOut，然後淡出在這張相同的照片，但之後，由於新的「src」而改變了幾秒鐘，但即使瀏覽器沒有載入新的圖像，舊的也沒有顯示，因爲src被改變了，但是它顯示了，並且在一秒之後，也許兩個改變到新的。有人能告訴我什麼是錯的嗎？fadeIn出問題了

var dimage = $next.children("img").attr("rel"); 
$(".photo img").fadeOut("slow", function() { 
    $(".photo img").attr("src", dimage); 
    $(".photo img").fadeIn("slow"); 
});

來源

2014-04-07 user3503743

你沒有給新圖像足夠的時間來加載。 –

，因爲瀏覽器在更改src後需要幾秒鐘才能下載圖像。 –

這可能是因爲在更改src後圖像必須加載。
考慮將圖像放入標記中，然後將css屬性設置爲顯示：無。這樣，圖像將在您的腳本運行之前在瀏覽器中預加載，並在其執行時可用。

來源

2014-04-07 15:55:33 RacerNerd

您沒有給新圖像足夠的時間加載。

function loadImage (src) { 
    return $.Deferred(function(def){ 
     var img = new Image(); 
     img.onload = function(){ 
      def.resolve(src); 
     } 
     img.src = src; 
    }).promise(); 
} 
var dimage = $next.children("img").attr("rel"); 
var imageLoadedDef = loadImage(dimage); 
$(".photo img").fadeOut("slow", function() { 
    def.done(function(src){ 
     $(".photo img").attr("src", src); 
     $(".photo img").fadeIn("slow"); 
    }); 
});

來源

2014-04-07 15:59:26

當然，無論是淡入或顯示它像任何其他元素（但要確保它也預裝！） –

所強調的問題是關於圖像沒有準備好顯示，當你打電話給他們，所以解決的辦法是啓動幻燈片之前預裝載這些文件，創建一個函數與圖像路徑的陣列

function preLoad(){ 
    var imgs = {'test1.jpg', 'test2.jpg', 'test3.jpg'}; 
    var img = document.createElement('img'); 
    for(var i = 0; i < imgs.leght; i++){ 
    img.src = imgs[i]; //all images gets preloaded at this stage 
    } 

    startSlider(); //here you will do your code 
}

來源

2014-04-07 16:03:09 Sherlock

fadeIn出問題了

回答

相關問題