Document : évènement prerenderingchange

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

L'évènement prerenderingchange est déclenché sur un document pré-rendu lorsqu'il est activé (c'est-à-dire lorsque l'utilisateur·ice consulte la page).

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

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

onprerenderingchange = (event) => { }

Cet exemple montre comment différer du code qui s'exécuterait normalement pendant le pré-rendu, jusqu'après l'activation de la page. C'est utile pour différer le code d'analyse, qui n'est pertinent que lorsque la page est effectivement consultée.

Le code vérifie si le pré-rendu est en cours via Document.prerendering et, le cas échéant, ajoute un gestionnaire d'évènement pour exécuter une fonction d'initialisation analytique une fois la page activée. Sur une page qui n'est pas en pré-rendu, le code d'analyse s'exécute immédiatement.

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

Notez que ce type de code ne doit pas être utilisé pour mesurer la fréquence d'activation d'un pré-rendu, car le code peut s'exécuter après que la page pré-rendue a déjà été activée.

Note : Voir la page d'accueil de l'API Speculation Rules et en particulier la section Conditions de chargement spéculatif non sûr pour plus d'informations sur les types d'activités que vous pourriez vouloir différer jusqu'à la fin du pré-rendu.

Mesurer les activations de pré-rendu

Ce code montre comment mesurer la fréquence d'activation d'un pré-rendu. Il utilise l'évènement prerenderingchange pour suivre les activations, et Performance.getEntriesByType() pour suivre les activations de navigation.

if (document.prerendering) {
  document.addEventListener(
    "prerenderingchange",
    () => {
      console.log("Pré-rendu activé après l'exécution de ce script");
    },
    { once: true },
  );
} else if (performance.getEntriesByType("navigation")[0]?.activationStart > 0) {
  console.log("Pré-rendu activé avant l'exécution de ce script");
} else {
  console.log("Ce chargement de page ne s'est pas fait via un pré-rendu");
}