AEMの商品詳細ページで商品設定を切り替えると、グレーのボックスが表示される

製品詳細ページ の現在の画像読み込みロジックを確認し、設定が変更されたときに画像がどのように取得およびレンダリングされるかに焦点を当てます。

画像が設定を選択した後にのみ読み込まれる場合は、次のいずれかの最適化を実装することを検討してください。

• 製品詳細ページ が読み込まれると、すべての設定の画像がプリロードされ、オプションを切り替えるときに画像を利用できるようになります。
• グレーのボックスではなく、よりユーザーフレンドリーなプレースホルダーまたは読み込みアニメーションを使用して、遅延読み込みを実装します。

画像をプリロードするには、ページマークアップ内の各設定画像に非表示の<img>要素を追加するか、JavaScriptを使用してImage オブジェクトを作成し、プリロードする画像のURLにsrc属性を設定します。

プレースホルダーをカスタマイズするには、製品詳細ページ 画像コンポーネントを更新して、新しい画像の取得中にプレーングレーのボックスの代わりに、ブランド化された、または視覚的に魅力的な読み込みインジケーターを表示します。

製品設定を切り替えて製品詳細ページ をテストし、画像が目立つグレーのボックスやラグなしでスムーズに読み込まれることを確認します。