Sorte de préchargement des pages comme Youtube

Bonjour,

Je suis étonné par le système d'affichage de youtube. Lorsqu'on est sur la page principale https://www.youtube.com/ et que l'on clique sur un lien dans le menu de droite pour tomber par exemple sur cette page https://www.youtube.com/feed/trending il n'y a pas de clignotement lors du passage d'une page à l'autre.
On a l'impression que la nouvelle page chargée est préchargée et ne s'affiche alors que la différence avec la page d'avant. D'ailleurs il y a aussi un système de progress bar (comme celui-ci http://ricostacruz.com/nprogress/) , qui finit toujours à 60% sur la page courante, puis démarre à 60% dans la nouvelle page pour aller d'un coup jusqu'au bout.

Comment ont-ils fait ? Quelqu'un aurait une piste ?

Merci,
Vincent.

Bonjour,

Citation:

---

Comment ont-ils fait ? Quelqu'un aurait une piste ?

---

ouvre la console à l'onglet réseau, il y a des chances que cela doit fait avec de l'Ajax, je n'ai pas été voir.

Bonsoir,

Comment ont-ils fait est une question... Et comment on peut faire en est une autre.

Un CTRL+U sur la page de youtube, pour en afficher le code, montre qu'il est plutôt complexe. Ce peut être le résultat recherché... ou pas.

Bref, une solution consiste à charger la nouvelle page dans un iframe invisible, puis, la page étant complètement chargée, à rendre l'iframe visible.

Bonjour,

J'ai fouillé, fouillé et encore fouillé sur Internet et j'ai fini par trouvé comment disent nos amis anglo-saxons. Ils parlent soit de flashing soit de flickering. Donc une recherche google du type "prevent flickering between pages" m'a permis d'en connaitre un peut plus sur ce sujet.

Pour Internet Explorer, celui qui fait le plus de flash entre deux pages, il était possible à une époque d'utiliser les meta-data suivant:

Code:

---

1 2	<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)"> <meta http-equiv="Page-Exit" content="blendTrans(Duration=0)">

---

Ces métas data ont été abandonnés par la suite et ne sont plus supportés depuis la version ~10 d'IE.

Ensuite, de ce que j'ai trouvé, ce qui a le mieux fonctionné je trouve pour Chrome est ceci à mettre dans le CSS du body contenant le background qui flash:

Code:

---

1 2 3

-webkit-transform: translate3d(0,0,0); -webkit-perspective: 1000; -webkit-backface-visibility: hidden;

---

Ou à mettre dans l'élément qui va flasher. Ces CSS permettent d'utiliser l'accélération 3D de l'ordi.

Si je parle de Chrome, c'est parce que Firefox lui ne flash jamais, le passage d'une page est bien mieux gérée.

Pour Edge, je n'ai pas trouvé de solution qui enlève ce flash horrible.

Ensuite, si il n'y a pas de flash sur Youtube c'est aussi parce qu'il n'y pas de background au body. Ajouter un background de grande dimension au body va généré un flash sur Chrome ou sur Edge.

Et en fouillant le code source de Youtube, j'ai vu qu'ils utilisaient une API permettant de savoir si l'utilisateur est actuellement sur la page ou pas. C'est une API que je ne connaissais et qui peut être utile, par exemple, mettre en pause des animations ou autre si l'utilisateur n'est plus sur la page:
https://developer.mozilla.org/en-US/...Visibility_API

Vincent.