5

私は大規模なクライアントのために作業しているサイトを持っています。このサイトにはぼやけた街並みの背景画像があり、背景にはシミュレートされたちらつきライトの約 20 の要素があります。フェードのパフォーマンスが低下する可能性があることは理解していますが、19 要素でもそれほど悪くはないと考えました。私は間違っていた。

現在のところ、各要素は次のようにスパークリングを再帰的に処理します。

function sparkle(flag, time) {
    if (flag) {
        setTimeout(function () {
            self.fadeIn(getRandomInt(250,1000), function () {
                sparkle(!flag, getRandomInt(250,1000));
            });
        }, time);
    } else {
        setTimeout(function () {
            self.fadeOut(getRandomInt(250,1000), function () {
                sparkle(!flag, getRandomInt(250,1000));
            });
        }, time
    }
}

これらすべてを異なる速度で 20 回実行すると、パフォーマンスへの影響が極端に大きくなります。問題は、このサイトを IE7 に移行する必要があることです (これにはカスタムのフェードイン/アウト機能があります)。そのため、選択肢がほとんどありません。

私の当面の答えは、css opacity トランジションのサポートを確認し、フェードインとフェードアウトを利用可能な css トランジションに変換することです。元のスタイルを最適化して実行速度を大幅に向上させる方法があるかどうか疑問に思っていました。私は、パフォーマンス ヒットの原因となる時間の経過に伴うフェード レートを決定するために、エレメントごとに過剰な数の処理とコールバックが行われていると想定しています。とにかく、残りの要素が独自のオフセットに基づいてフェージングを行う要素を1つ持つことはありますか(それが理にかなっている場合)?

前もって感謝します

4

1 に答える 1