DokumentationExperience Cloud KCS

Beim Wechseln der Produktkonfigurationen auf der Produktdetailseite in AEM wird ein graues Feld angezeigt

Letzte Aktualisierung: 5. Oktober 2026

In Adobe Experience Manager as a Cloud Service (AEMaaCS) wird auf der Produktdetailseite) ein graues Feld angezeigt wenn zwischen Produktkonfigurationen gewechselt wird, bevor das neue Produktbild geladen wird. Das Problem tritt am deutlichsten auf, wenn zwischen Produktvarianten umgeschaltet wird und ein Platzhalter angezeigt wird, bis das neue Bild verfügbar ist. Um das Problem zu beheben, laden Sie Konfigurationsbilder vorab oder verbessern Sie die Platzhalterverarbeitung.

Beschreibung description

Umgebung

  • Adobe Experience Manager as a Cloud Service (AEMaaCS)
  • AEM SaaS-Bereitstellungen

Problem/Symptome

  • Beim Wechseln zwischen verschiedenen Produktkonfigurationen auf der Produktdetailseite wird im Hauptproduktbild kurz ein graues Feld angezeigt, bevor das neue Bild geladen wird.
  • Dies ist am auffälligsten, wenn Sie zwischen Produktvarianten wechseln, wobei das Bild nicht vorgeladen ist und ein Platzhalter angezeigt wird, bis das neue Bild verfügbar ist.

Grundursache

Diese Verzögerung wird normalerweise durch die Art und Weise verursacht, wie Bilder bei Konfigurationsänderungen abgerufen und gerendert werden, insbesondere wenn Bilder nicht vorgeladen sind.

Lösung resolution

Gehen Sie wie folgt vor, um das Problem zu beheben:

  1. Überprüfen Sie die aktuelle Logik zum Laden von Bildern für die Produktdetailseite und konzentrieren Sie sich darauf, wie Bilder abgerufen und gerendert werden, wenn eine Konfiguration geändert wird.

  2. Wenn Bilder erst geladen werden, nachdem eine Konfiguration ausgewählt wurde, sollten Sie eine der folgenden Optimierungen implementieren:

    • Laden Sie Bilder für alle Konfigurationen vorab, wenn die Produktdetailseite geladen wird, damit sie beim Wechseln zwischen Optionen verfügbar sind.
    • Implementieren Sie verzögertes Laden mit einem benutzerfreundlicheren Platzhalter oder laden einer Animation anstelle eines grauen Felds.

  3. Um Bilder vorab zu laden, fügen Sie für jedes Konfigurationsbild im Seiten-Markup ausgeblendete <img> hinzu oder verwenden Sie JavaScript , um Image-Objekte zu erstellen und ihre src-Attribute auf die URLs der Bilder festzulegen, die vorab geladen werden sollen.

  4. Um den Platzhalter anzupassen, aktualisieren Sie Ihre Bildkomponente Produktdetailseite, sodass anstelle eines einfachen grauen Felds während des Abrufs des neuen Bildes ein markierter oder visuell ansprechender Ladeindikator angezeigt wird.

  5. Testen Sie die Produktdetailseite, indem Sie zwischen Produktkonfigurationen wechseln und überprüfen, ob das Bild reibungslos geladen wird, ohne dass ein grauer Rahmen oder eine Verzögerung bemerkbar ist.

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