Ein neues benutzerdefiniertes Event hydrationDone wurde in der Vorschau eingeführt. Dieses Event wird ausgelöst, sobald die Funnel-/Website-Vorschau ihre Hydration abgeschlossen hat, sodass ein Benutzer bestimmten benutzerdefinierten Code nach der Hydration ausführen kann.
Warum wird das benötigt?
Zuvor konnten Benutzer auf Probleme stoßen, bei denen ihre benutzerdefinierten Skripte ausgeführt wurden, bevor unsere Vorschau-Hydration abgeschlossen war. Diese zeitliche Diskrepanz konnte zu einem fehlerhaften Ausführungsablauf führen und die beabsichtigte Funktionalität ihres benutzerdefinierten Codes beeinträchtigen.
Wie haben wir das gelöst?
Durch das Auslösen des Events „hydrationDone“, nachdem die vollständige Hydration der Vorschau abgeschlossen ist, haben wir diese Konfliktquelle effektiv beseitigt.
Benutzer können einen Event-Listener für das Event „hydrationDone“ hinzufügen und anschließend ihren Code ausführen. Dies ist besonders nützlich, wenn sie versuchen, DOM-Inhalte zu manipulieren.
Wie wird es verwendet?
Füge ein Code-Element im Builder hinzu.
Höre auf das Event „hydrationDone“ wie unten gezeigt:
document.addEventListener( "hydrationDone", () => { // Füge hier benutzerdefiniertes JavaScript hinzu})Sobald der DOM-Inhalt der Vorschau geladen ist und das Hydration-Event empfangen wurde, wird der benutzerdefinierte Code ohne Probleme oder Race Conditions ausgeführt.
Hinweis: „JavaScript optimieren“ muss möglicherweise deaktiviert werden, wenn der benutzerdefinierte Code des Benutzers beim Laden der Seite kritisch ist, da dies das Hydration-Event verzögert, wenn keine Benutzerinteraktion erfolgt.
So sollte dein benutzerdefiniertes JavaScript/HTML aussehen:
