iPad用のアバタークリエーターを作成しています。ユーザーは、さまざまな髪型、髪の色、肌の色などを選択できます。
このページには、選択領域 (選択されたオプションが小さなサムネイルとして表示される) とプレビュー領域 (選択されたオプションが大きく表示される) の 2 つのコンポーネントがあります。
各オプションは SVG ファイルとして保存されます。SVG を使用すると、多くの利点があります。
- Retina ディスプレイでも鮮明なままです
- 各アセットのファイル サイズが小さい (画像がベクター ベースであるため)
- ファイルは小さくても透過性を維持できます
- 同じ画像をプレビュー/選択領域に使用できます (ブラウザーは CSS を介して画像を拡大縮小するだけです)。
jquery を使用して oage のクラス ID を変更すると、呼び出される CSS コードに影響します (CSS は SVG 画像を背景画像として保持します)。
多数のオプションがあるため、ユーザーが圧倒されないように、関連するオプションのみが選択領域に表示されます。たとえば、赤い髪をタップすると、赤い髪のスタイルのみが表示されます (ユーザーが関連する色を選択するまで、他のすべての髪のスタイルは非表示になります)。
すべてが正常に機能します。唯一の欠点は、ユーザーがオプションをタップすると、ブラウザがサーバーから画像を取得するまでに遅延が発生することです。
遅延がないように、読み込みプロセスを高速化するにはどうすればよいですか?
ここに私が検討したいくつかのオプションがあります：
CSS スプライト 通常、CSS スプライトはこれを修正します。ただし、さまざまなオプションがあるため、CSS スプライトを手動で作成するのは現実的ではなく、SVG スプライトの作成をサポートする自動化されたオプションはありません。PNG に切り替えると、ファイル サイズが非常に大きくなります。
Invisible Loading すべての画像を背景画像として保存する非表示の DIV を作成しました (CSS3 の複数の背景画像プロパティを使用)。これにより、すべての画像が読み込まれ、ユーザーが画像をタップしたときにすぐに表示できるようになります。唯一の欠点は、これによりページの最初の読み込みに時間がかかることです。
より良いオプションはありますか？
（残念ながら、私の作品へのリンクを提供することはできません）。