Dokument: prerenderingchange Event

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("prerenderingchange", (event) => {});

prerenderingchange = (event) => {};

Ein generisches Event.

Das Beispiel zeigt, wie Code, der sonst während des Prerenderings ausgeführt würde, so lange aufgeschoben wird, bis die Seite aktiviert wird. Dies ist nützlich, um Analyse-Code zu verschieben, der nur relevant ist, wenn und falls die Seite tatsächlich angesehen wird.

Der Code prüft, ob Prerendering läuft, indem Document.prerendering verwendet wird, und fügt in diesem Fall einen Ereignislistener hinzu, um eine Analyse-Initialisierungsfunktion auszuführen, sobald die Seite aktiviert wird. Auf einer Seite, die nicht prerendert wird, wird der Analyse-Code sofort ausgeführt.

if (document.prerendering) {
  document.addEventListener("prerenderingchange", initAnalytics, {
    once: true,
  });
} else {
  initAnalytics();
}

Beachten Sie, dass dieser Code nicht verwendet werden sollte, um zu messen, wie oft ein Prerender aktiviert wird, da der Code möglicherweise ausgeführt wird, nachdem eine prerenderte Seite bereits aktiviert wurde.

Dieser Code zeigt, wie oft ein Prerender aktiviert wird. Es nutzt prerenderingchange, um Aktivierungsereignisse zu verfolgen, und Performance.getEntriesByType(), um Navigationsaktivierungen zu verfolgen.

if (document.prerendering) {
  document.addEventListener(
    "prerenderingchange",
    () => {
      console.log("Prerender activated after this script ran");
    },
    { once: true },
  );
} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) {
  console.log("Prerender activated before this script ran");
} else {
  console.log("This page load was not via prerendering");
}

• Speculation Rules API
• prerendering Eigenschaft
• PerformanceNavigationTiming.activationStart Eigenschaft