如何提高圖像淡入淡出性能？

Question

我希望能夠對寬度設置為屏幕100％的大圖像進行交叉淡入淡出過渡。 我有一個想要完成的工作示例。 但是，當我在各種瀏覽器和各種計算機上進行測試時，到處都看不到黃油般平滑的過渡。

參見jsFiddle上的演示： http : //jsfiddle.net/vrD2C/

請參閱Amazon S3： http : //imagefader.s3.amazonaws.com/index.htm

我想知道如何提高性能。 這是實際進行圖像交換的函數：

function swapImage(oldImg, newImg) {
    newImg.css({
        "display": "block",
        "z-index": 2,
        "opacity": 0
    })
    .removeClass("shadow")
    .animate({ "opacity": 1 }, 500, function () {
        if (oldImg) {
            oldImg.hide();
        }
        newImg.addClass("shadow").css("z-index", 1);
    });
}

使用jQuery animate()更改不透明度是一種不好的方法嗎？

Answer 1

您可能需要研究CSS3 Transitions，因為瀏覽器可能比直接在循環中設置屬性的Javascript更好地優化了它。 這似乎是一個不錯的開始：

http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/

Answer 2

我不確定這是否會幫助優化您的性能，因為我目前正在放大的計算機上使用IE9，即使我將瀏覽器置於IE7或8文檔模式，JavaScript也不會對您當前的代碼造成影響。 但是，您可以考慮對代碼進行以下優化。

通過將所有照片放在隱藏的容器中，可以給主ID放入一個隱藏的容器中，以使ID成為“隊列”或類似的名稱，從而使DOM的內容雜亂無章。 這也將使瀏覽器在任何給定時間只能處理兩個可見圖像，從而減少了在堆疊上下文，定位等方面的考慮。

重寫代碼以使用事件觸發器，並將淡入處理綁定到事件，在當前轉換完成后，調用隊列事件中的第一張圖像。 我發現此方法比某些超時管理的腳本更適合循環動畫。 如何執行此操作的示例如下：

// Bind a custom event to each image called "transition"
$("#queue img").bind("transition", function() {
    $(this)
        // Hide the image
        .hide()

        // Move it to the visible stage
        .appendTo("#photos")

        // Delay the upcoming animation by the desired value
        .delay(2500)

        // Slowly fade the image in
        .fadeIn("slow", function() {

            // Animation callback
            $(this)

                // Add a shadow class to this image
                .addClass("shadow")

            // Select the replaced image
            .siblings("img")

                // Remove its shadow class
                .removeClass("shadow")

                // Move it to the back of the image queue container
                .appendTo("#queue");

            // Trigger the transition event on the next image in the queue
            $("#queue img:first").trigger("transition");

        });   
}).first().addClass("shadow").trigger("transition"); // Fire the initial event

在您有問題的瀏覽器中嘗試此工作演示 ，讓我知道性能是否仍然很差。

Answer 3

我也有同樣的問題。 我只是預加載了圖像，轉場又變得流暢了。

Answer 4

關鍵是IE不符合W3C，但是ctcherry的+1（如使用CSS一樣）是平滑過渡的最有效方法。

然后是使用javascript編碼的解決方案，或者直接使用js（但需要付出一些努力才能符合W3C Vs瀏覽器），或者使用JQuery或Mootools之類的庫。

這是一個符合您需求的javascript編碼示例（請參見在線演示） ：

var Fondu = function(classe_img){
this.classe_img = classe_img;
    this.courant = 0;
this.coeff = 100;
this.collection = this.getImages();
this.collection[0].style.zIndex = 100;
this.total = this.collection.length - 1;
this.encours = false;
}
Fondu.prototype.getImages = function(){
var tmp = [];
if(document.getElementsByClassName){
    tmp = document.getElementsByClassName(this.classe_img);
}
else{
    var i=0;
    while(document.getElementsByTagName('*')[i]){
        if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img) > -1){
            tmp.push(document.getElementsByTagName('*')[i]);
        }
        i++;
    }
}
var j=tmp.length;
while(j--){
    if(tmp[j].filters){
        tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
        tmp[j].style.filter = 'alpha(opacity=100)';
        tmp[j].opaque = tmp[j].filters[0];
        this.coeff = 1;
    }
    else{
        tmp[j].opaque = tmp[j].style;
    }
}
return tmp;
}
Fondu.prototype.change = function(sens){
if(this.encours){
    return false;
}
var prevObj = this.collection[this.courant];
this.encours = true;
if(sens){
    this.courant++;
    if(this.courant>this.total){
        this.courant = 0;
    }
}
else{
    this.courant--;
    if(this.courant<0){
        this.courant = this.total;
    }
}
var nextObj = this.collection[this.courant];
nextObj.style.zIndex = 50;
var tmpOp = 100;
var that = this;
var timer = setInterval(function(){
    if(tmpOp<0){
        clearInterval(timer);
        timer = null;
        prevObj.opaque.opacity = 0;
        nextObj.style.zIndex = 100;
        prevObj.style.zIndex = 0;
        prevObj.opaque.opacity = 100 / that.coeff;
        that.encours = false;
    }
    else{
        prevObj.opaque.opacity = tmpOp / that.coeff;
        tmpOp -= 5;
    }
}, 25);
}