DocumentationExperience Cloud KCS

Une boîte grise s’affiche lors du changement de configurations de produit sur la page Détails du produit dans AEM

Dernière mise à jour : 5 octobre 2026

Dans Adobe Experience Manager as a Cloud Service (AEMaaCS), une boîte grise s’affiche sur la page des détails du produit lors du passage d’une configuration de produit à l’autre avant le chargement de la nouvelle image du produit. Le problème est plus visible lorsque vous basculez entre les variantes de produit et qu’un espace réservé s’affiche jusqu’à ce que la nouvelle image soit disponible. Pour résoudre ce problème, préchargez les images de configuration ou améliorez la gestion des espaces réservés.

Description description

Environnement

  • Adobe Experience Manager as a Cloud Service (AEMaaCS)
  • Déploiements SaaS d’AEM

Problème/Symptômes

  • Lorsque vous basculez entre différentes configurations de produit sur la Page des détails du produit, l’image principale du produit affiche brièvement une zone grise avant le chargement de la nouvelle image.
  • Cela est particulièrement visible lorsque vous basculez entre des variantes de produit, où l’image n’est pas préchargée et un espace réservé s’affiche jusqu’à ce que la nouvelle image soit disponible.

Cause première

Ce retard est généralement dû à la manière dont les images sont récupérées et rendues lors des modifications de configuration, en particulier si les images ne sont pas préchargées.

Résolution resolution

Suivez les étapes ci-dessous pour résoudre le problème :

  1. Examinez la logique actuelle de chargement des images pour la page Détails du produit, en vous concentrant sur la manière dont les images sont récupérées et rendues lorsqu’une configuration change.

  2. Si les images ne sont chargées qu’une fois la configuration sélectionnée, envisagez d’implémenter l’une des optimisations suivantes :

    • Précharger les images pour toutes les configurations lorsque la page Détails du produit se charge afin qu’elles soient disponibles lors du changement d’option.
    • Mettez en œuvre le chargement différé avec un espace réservé plus convivial ou une animation de chargement au lieu d’une zone grise.

  3. Pour précharger des images, ajoutez des éléments <img> masqués pour chaque image de configuration dans le balisage de la page ou utilisez JavaScript pour créer des objets Image et définir leurs attributs src sur les URL des images à précharger.

  4. Pour personnaliser l’espace réservé, mettez à jour votre composant image Page de détails du produit afin d’afficher un indicateur de chargement de marque ou attrayant visuellement au lieu d’une zone grise simple lors de la récupération de la nouvelle image.

  5. Testez la page Détails du produit en passant d’une configuration de produit à l’autre et vérifiez que l’image se charge correctement sans boîte grise ni décalage visible.

recommendation-more-help
experience-cloud-kcs-help-kbarticles