0

サイトのパフォーマンスについて質問があります。何らかのスライダーでホームページに表示する必要がある 4 つの大きな画像 (1920*500px) があります。次の画像を表示するには、ユーザーがクリックする必要があります。スライド ショーではありません。ホームページが読み込まれると、最初の画像のみが表示され、残りはユーザーの要求によってのみ表示される必要があります。私の質問は次です。1 つの大きな画像 (スプライト) を作成し、これを背景として使用するのは賢明ですか (この画像は中心に焦点を当てており、この解像度をサポートするディスプレイを持っているユーザーは穴の画像を見ることができます。そのようなディスプレイを持っていないユーザーはできる限り見てください）または標準のimgタグを使用するか、これを行うためのより良い方法がありますか？

4

3 に答える 3

3

スプライトを使用する利点は、HTTP リクエストを保存して画像をプリロードできることです (たとえば、レスポンシブ画像のロールオーバーには不可欠です)。

あなたの場合、スプライトは意味がないと思います。まず、3 つの http 要求のみを保存し (最初の画像は、ページを読み込んだときに表示される可能性があります)、すべての訪問者にこれらの大きな画像が表示されなくてもダウンロードするように強制しています。

于 2012-12-19T00:57:41.937 に答える
0

クラスをjQueryで変更します。

.bg-1 { background: url("your image") no-repeat center center fixed; }
.bg-2 { background: url("your image 2") no-repeat center center fixed; }
.bg-3 { background: url("your image 3") no-repeat center center fixed; }
于 2012-12-19T01:29:12.567 に答える
0

何を求めているのかよくわかりませんが、常に画像の 1 つをレンダリングする場合は、このような全画面の背景画像を作成するのが賢明かもしれません。必要に応じてjsで背景画像を変更することもできます

<style>
html
{ 
  background: url("your image") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity:1;
}
</style>
于 2012-12-19T00:52:21.983 に答える