的JavaScript淡入/淡出，在Firefox

Question

淡出之上IMG筆觸，我做這個網站http://bit.ly/JV5I0Z和

我有淡入效果，其中第二圖像（newBg）看臺上的第一個頂部（ bgImg）並淡入，然後我將src從第2個複製到第1個，現在它們都是相同的圖像，然後將第2個不透明度設置爲0，並在用戶更改圖像時重複。

這對Opera和Chrome來說很好，但在Firefox上，fadein就像是太慢了，並且img淡出了（它並沒有真正淡出，就像我說的，只是被覆蓋）在動畫結尾，出現然後消失。

我不確定是什麼導致了這一點，什麼可能導致Firefox中緩慢的淡入淡出？

這裏是代碼處理淡入件事：http://jsfiddle.net/VbjPc/1/

任何幫助表示讚賞。

編輯------------

我已經更新了的jsfiddle http://jsfiddle.net/VbjPc/1/用，我使用的預加載圖像的代碼。新代碼位於底部。我認爲預加載正在工作，因爲在圖像加載之前什麼也沒有發生，你可以告訴它們就像〜500kb，因此它們需要幾秒鐘才能加載。

Answer 1

在Web瀏覽器中首次加載圖像時，瀏覽器下載圖像時會出現一定程度的延遲。

一般來說，大多數網站都有很多移動部件。當瀏覽器下載HTML文檔時，瀏覽器將開始處理由HTML文檔中的HTML元素表示的所有元素和事件。

例如，當鏈接標籤遇到時，CSS開始加載。 JavaScript正在加載腳本元素。其他HTML元素被添加到DOM。發生這種情況時，將觸發事件，將請求發送到服務器以下載這些資源。

當向DOM添加img標記時，將向服務器發送請求以檢索由src屬性標識的資源。圖像完全下載後，它會呈現在頁面上。

假設我們正在處理適合網站尺寸的圖片，當我們正常加載圖片而沒有任何效果時，我們並沒有真正注意到延遲，因爲一旦圖片或多或少即時顯示完成下載。

但是，當我們添加效果時，如fadeIn和fadeOut，延遲效果變得非常清晰。發生這種情況是因爲JavaScript事件實際上開始修改img元素的CSS屬性，即使實際資源尚未準備好。

因此，一旦將DOM元素添加到DOM中，而不是在圖像加載完成時，fadeIn和fadeOut事件就會觸發。換句話說，當圖像仍在被下載時，fadeIn或fadeOut動作會發生。這會產生一種震動效果，因爲部分褪色但未呈現的圖像可能突然出現，然後在其餘部分緩慢褪色。

此操作不是我們要尋找的平滑漸變效果。

現在，您可能會注意到，這不會發生在您加載圖像的第2,3,4或n次。在瀏覽器緩存圖像的情況下，延遲會大大降低，並且fadeIn/fadeOut效果會像應該顯示的那樣顯示。光滑漸變。

我在淡入圖像時通常使用的技術是首先預加載它。雖然有些圖書館會爲您預先加載所有圖片，但在應用您的fadeIn事件之前，下面是一種用於預加載圖片的非常簡單，快速的技術：

將圖片放在HTML中作爲隱藏圖片：

<!-- Hidden by default, but now preloaded for a smooth fadeIn effect --> 
<img id="myImage" src="/images/myImage.png" style="display:none" /> 

使用jQuery添加隱藏圖像，同時結合click事件：

如果圖像的東西，將淡入點擊事件發生後，我發現這種方法是相當有用：

// preload the image while registering the click event 
$('<img id="myImage" src="/images/myImage.png" style="display:none" />') 
    .append("body"); 

$('button').click(function() { 
    $('#myImage').fadeIn(); 
}); 

使用jQuery的負載事件預裝因爲它需要的圖像：

這是可能的，用戶可能永遠不會點擊按鈕來顯示圖像;因此，這是一種在請求時預加載圖像的技術，但仍然不會刺激用戶。如果用戶決定不點擊按鈕，資源永遠不會從服務器請求。此外，由於我們在啓動fadeIn事件之前等待圖像加載，我們仍然可以獲得我們正在尋找的平滑度，但是在過程開始之前可能會稍微延遲。

// preload the image while registering the click event 

$('button').click(function() { 
    // place img element on page without specifying the src attribute 
    $('<img id="myImage" style="display:none" />').append("body"); 

    // bind a load event to the image element so fadeIn doesn't start until 
     // the image is completely downloaded 
    $('#myImage').load(function() { 
     $(this).fadeIn(); // fade in the image 
    }); 

});