IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Sorte de préchargement des pages comme Youtube


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    551
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 551
    Par défaut 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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    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.

  3. #3
    Membre chevronné
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2014
    Messages
    393
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Mai 2014
    Messages : 393
    Par défaut
    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.

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    551
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 551
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

Discussions similaires

  1. Gérer le scroll comme des pages
    Par siddh dans le forum Téléchargez
    Réponses: 0
    Dernier message: 04/10/2011, 17h36
  2. Faire une mise en page comme avec des frames
    Par kelyly dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/05/2010, 18h42
  3. [CANON] Imprimante sort des pages blanches
    Par neo2k2 dans le forum Périphériques
    Réponses: 2
    Dernier message: 03/12/2008, 11h23
  4. Imprimante sort des pages blanches
    Par zaineb.z dans le forum Périphériques
    Réponses: 1
    Dernier message: 08/11/2008, 13h03
  5. Imprimante sort des pages noires
    Par stounouslous dans le forum AWT/Swing
    Réponses: 11
    Dernier message: 17/08/2007, 17h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo