0

私はこのhttp://learnlakenona.com/のような病気のスライダーを作ろうとしています

しかし、私はクロームで大きなパフォーマンスの問題を抱えています（彼らのサイトはクロームでスライダーを実行していないようです）。divでbackground-imageCSSを使用して画像を表示していますが、imgタグとして画像を追加すると、さらに遅延が発生します。

私はすべてのJavaScriptを無効にしましたが、巨大な画像を重ね合わせただけでまだ遅れが出ていることに気づきました。

これがそこに座っているいくつかの画像です。パネルのサイズを変更してみてください。画像を再描画するとロックされます。（時々それは少しの間大丈夫です、それは奇妙です） http://jsfiddle.net/LRynj/2/

このようなスライダーで許容できるパフォーマンスを得る方法を誰かが知っていますか？（画像はかなり大きくする必要があります）

4

2 に答える 2

4

画像エディタで画像のサイズを変更するか、品質を下げることで、画像アセットを最適化します。

オンラインで無料のツールを使用することもできます。

http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/

于 2012-06-16T17:59:37.517 に答える
2

このサイトでは、視差効果のために巨大な透明PNGを使用しているため、次のようになります。

  • 画像の総重量を減らす必要があります。まだ行っていない場合は、これらのPNGをPNG-8に変換してみてください。量子化アルゴリズムなどは、品質をあまり低下させることなく、画像を256色に減らすのに非常に効果的です。
  • 視差効果の透明度を維持する必要があります。どちらのタイプの透明度もPNG-8と互換性があります。各ピクセルの透明度のGIFのような不透明/透明ビットと、各ピクセルの透明度が256レベルの「PNG-32」のような（PNG-24 + 8ビットの透明度）。Adobe Fireworksは、このような「PNG-8+alpha」画像の作成に特に優れています。コンバーターも存在しますが、完全ではありません（画像によって異なります）。
  • すぐに表示される画像の最小部分をロードし、後で9600px幅（！）の残りの部分をロードすると、最初の表示までの時間が大幅に短縮されます。1920または2560pxのチャンクで画像をスライスし、3つの画像の表示された部分を背景画像としてロードし、DOMの準備ができた後にのみ実行されるスクリプトを介して、他のすべての部分をロードすることで、これを実現できます。ダウンロードするアセットが増えることを意味するが、4MBのスプライトではないため、パーツが多すぎない:)ボーナス：3つの画像をPNG-8にスライスすることで、各PNGに独自の256色のパレットがあり、全体的な品質が向上します（ PNG-24と同じくらい完璧ですが、合計256色しか使用できない単一の9600px PNG-8よりも優れています。1つのPNGの男性用スーツのグレーの色調が増え、ボールアンドスティック分子の光沢のある色が増えます。

編集：そしてスマートフォンにそれをロードしようとしないでください！私はメディアクエリが好きで、UA検出を避けています。これは、ほとんどの場合必要ではなく、完全ではないためですが、それは歓迎されるケースの1つです（8MBの画像をロードすることを選択します）...そうでないユーザーを無視します。光ファイバーがあり、サイトが表示されるのを待たないことは、あなたの質問とは関係のない別の問題です。

于 2012-06-16T20:35:48.740 に答える