Viene visualizzata una casella grigia quando si passa da una configurazione di prodotto a un’altra in AEM Product Detail Page
In Adobe Experience Manager as a Cloud Service (AEMaaCS), viene visualizzata una casella grigia nella pagina dei dettagli del prodotto quando si passa da una configurazione di prodotto all’altra prima che venga caricata la nuova immagine del prodotto. Il problema è più evidente quando si passa da una variante di prodotto all’altra e viene visualizzato un segnaposto fino a quando la nuova immagine non è disponibile. Per risolvere il problema, precarica le immagini di configurazione o migliora la gestione dei segnaposto.
Descrizione description
Ambiente
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- Distribuzioni SaaS di AEM
Problema/Sintomi
- Quando si passa da una configurazione di prodotto all’altra nella Pagina dettagli prodotto, l’immagine principale del prodotto visualizza brevemente una casella grigia prima del caricamento della nuova immagine.
- Ciò è più evidente quando si passa da una variante di prodotto all’altra, in cui l’immagine non viene precaricata e viene visualizzato un segnaposto fino a quando la nuova immagine non è disponibile.
Causa principale
Questo ritardo è in genere causato dal modo in cui le immagini vengono recuperate e renderizzate durante le modifiche della configurazione, soprattutto se le immagini non vengono precaricate.
Risoluzione resolution
Per risolvere il problema, segui i passaggi seguenti:
-
Rivedi la logica di caricamento immagine corrente per la pagina dei dettagli del prodotto, concentrandoti sul modo in cui le immagini vengono recuperate e sottoposte a rendering quando cambia una configurazione.
-
Se le immagini vengono caricate solo dopo aver selezionato una configurazione, puoi implementare una delle seguenti ottimizzazioni:
- Precarica le immagini per tutte le configurazioni al caricamento della Pagina dettagli prodotto in modo che siano disponibili quando si passano da un’opzione all’altra.
- Implementa il caricamento lento con un segnaposto più semplice da usare o un’animazione di caricamento anziché una casella grigia.
-
Per precaricare le immagini, aggiungi
<img>elementi nascosti per ogni immagine di configurazione nel markup della pagina, oppure utilizza JavaScript per creareImageoggetti e impostarne gli attributi src sugli URL delle immagini da precaricare. -
Per personalizzare il segnaposto, aggiorna il componente immagine Pagina di dettagli prodotto in modo da visualizzare un indicatore di caricamento personalizzato o visivamente accattivante invece di una semplice casella grigia durante il recupero della nuova immagine.
-
Verificare la pagina dettagli prodotto passando da una configurazione di prodotto all’altra e verificare che l’immagine venga caricata senza problemi, senza che si verifichi alcun ritardo o un riquadro grigio.