Qu'est-ce que le composant Polite Load ?
Le composant Polite Load permet de retarder le chargement des éléments d'une création (tels que les images) jusqu'à la fin du chargement de la page parente.
 |
Page chargée à hauteur de 20 % : le contenu initial s'affiche. |
 |
Page chargée à hauteur de 50 % : le contenu initial reste affiché. Aucune autre action ne se produit |
 |
Page chargée à hauteur de 100 % : le contenu supplémentaire s'affiche et les autres actions se déclenchent. |
Dans Studio, vous n'êtes pas obligé d'ajouter le composant Polite Load dans vos fichiers. Il est cependant possible que les spécifications des éditeurs le requièrent.
Lorsque vous utilisez cette fonctionnalité, vous pouvez concevoir votre création avec une image de préchargement initiale, attendre que le chargement de la page se termine, puis charger d'autres éléments (tels que des images, des animations ou des vidéos).
Configurer le composant Polite Load dans Google Web Designer
Lorsque vous concevez des créations dans Google Web Designer, vous ne devez pas ajouter de code. Lorsque vous publiez votre fichier (soit en local, soit directement dans Studio), cochez la case "Composant Polite Load" dans la section "Paramètres" de la boîte de dialogue "Publier" qui est présentée ci-dessous.
Utiliser une image de préchargement
Pour afficher une image initiale en attendant que la page se charge, utilisez le gestionnaire handleAdInitialized. En savoir plus
Configurer le composant Polite Load avec JavaScript
Ajoutez le code ci-dessous à votre fichier JavaScript après le code d'initialisation du composant Enabler. Ce code vérifie si la page est chargée à l'aide de la méthode isPageLoaded du composant Enabler. Cette dernière renvoie alors la valeur "true" ou "false". Si vous obtenez "true", appelez une fonction personnalisée qui charge votre création. Dans cet exemple, la fonction personnalisée est appelée politeInit. Si vous obtenez "false", écoutez l'événement PAGE_LOADED du composant Enabler avant d'appeler politeInit.
Extrait de code utilisant le composant Polite Load
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
// S'exécute une fois le composant Enabler prêt.
function init() {
if (Enabler.isPageLoaded()) {
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
}
};
// S'exécute une fois la page complètement chargée.
function politeInit(){
// Ajoutez votre code pour masquer une animation ou une image de chargement,
// et pour charger les éléments de la création ou lancer son animation.
};
Utiliser une image de préchargement
Si vous souhaitez afficher une image initiale en attendant que la page se charge, vous pouvez charger l'image de préchargement, puis la masquer une fois l'événement PAGE_LOADED reçu. Dans les exemples de fichiers, l'image de chargement est appelée "loading.gif". Son ID d'élément div correspond à "loading_image_dc".