0

CSS を介してページに合わせてスケーリングされた複数の画像があるフロントページギャラリーに取り組んでいます。

画像は次から次へとフェードアウトし (重なり合う)、ユーザーがブラウザーのサイズを変更してスペースを使い切ると、サイズが変更されます。

問題は、ほとんどのブラウザーと、最新のコンピューターを除くすべてのコンピューターで、画像のフェードがひどく実行されることです。

ただし、画像が引き伸ばされていない場合、パフォーマンスはほとんどのコンピューターのすべてのブラウザーで完璧です。

以前に設計した他のサイトでこの問題に遭遇し、ソリューションの調査とテストにかなりの時間を費やしましたが、何も見つからないようです.

何か案は？

パフォーマンスとスタイリングのトレードオフを実装しました。画像を 0.7543234 の係数で任意にスケーリングする代わりに、8 などに丸めます。任意のスケーリング係数はパフォーマンスに大きな影響を与えることがわかりました。10 進法スケーリングを使用すると、パフォーマンスが大幅に低下します。

ここにいくつかのjsコードがあります：

var adjustedNewWidth = Math.round((roundNumber( (newWidth / originalImage.width), 1)+0.1)*originalImage.width);

var adjustedNewHeight = Math.round((roundNumber( (newHeight / originalImage.height), 1)+0.1)*originalImage.height);
  • newWidth は目的の幅です。
  • originalImage.width は、元の画像サイズを保持する配列です (js は非常にスマートであるため、スケーリング後にこれらにアクセスすることはできません)。
  • roundNumebr は、最も近い小数点以下の桁数にスケーリングする関数です

function roundNumber(num, dec) { var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); return result; }

この後、フェードは約 50% 改善されますが、まだ完全ではありません。うまくいけば、これが誰かを助けることを願っています。

4

1 に答える 1

0

ブラウザが情報や画像を拡大縮小および表示する方法によるパフォーマンスの低下。

スケーリングされるものに以下を追加してみてください。

-ms-interpolation-mode: nearest-neighbor;
image-rendering: optimizeSpeed;

これにより、画像の拡大縮小中にフィルタリングがオフになり、低速のマシンではるかに高速になります。

アニメーションが完了したら、要素のスタイルを次のように設定します。

-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;

また、丸めスクリプトは、丸めるときにMathを頻繁に呼び出すようです。これは、（アニメーションのように）何度も繰り返すと非常に遅くなります。丸めスクリプトを次のよりスリムなバージョンに置き換えることで、オーバーヘッドを削減できます。

var roundNumber = function (num) {
    return ~~(num + .5);
    //this take a number (num), adds .5, then chops off the decimal place. 
}
于 2012-01-09T19:19:07.373 に答える