Curieux de la nouvelle façon dont YouTube charge les pages.

Question

J'ai remarqué que lorsque je regarde une vidéo et que je clique sur le logo ou sur une vidéo connexe, une barre de progression rouge (au-dessus du logo) s'affiche à l'écran. En même temps, il y a une légère superposition pour "griser" le contenu, puis la nouvelle page apparaît en fondu. Pour votre information, l'URL est remplacée par la nouvelle URL avant que la barre de progression et la transition ne se produisent.

Le div ID de cette barre est progress. On dirait une sorte de chargement jQuery ajax cool mais qui change de page. Je ne sais pas.

Answer 1

YouTube utilise le API HTML5 pour l'histoire pour ajouter et supprimer des URL de pages dans la pile d'historique. Ainsi, l'URL change dans la barre d'adresse et les boutons retour/avance fonctionnent, tout en continuant à charger la page via JS (ajax).

La manière la plus simple d'implémenter l'API avec une compatibilité ascendante à ce stade est d'utiliser la fonction Histoire.js . Par rétrocompatibilité, j'entends le retour à la méthode des balises de hachage pour les anciens navigateurs qui ne prennent pas encore en charge l'API HTML5 History.

Découvrez la démo de History.js !

Je pense que Twitter est probablement l'exemple le plus connu d'un site web utilisant des URL hachées. Par exemple twitter.com/#!/username est un spectacle courant depuis des années. Le problème avec cette méthode est que les balises de hachage sont côté client, et qu'il faut donc du JS pour les lire et servir le contenu approprié. Tout utilisateur qui n'utilise pas JS et qui clique sur une URL hachée atterrira simplement sur la page d'accueil de Twitter.

Beatport a été l'un des premiers grands sites web à utiliser la technique de l'histoire HTML5, soit dit en passant. SoundCloud l'a récemment mise en œuvre également. Les deux sites avaient grand besoin de la technique HTML5 History pour assurer la lecture audio pendant que les visiteurs parcourent les pages.

Answer 2

Ils ont annoncé une bibliothèque utilisée pour la navigation dynamique appelée stfjs .

Structured Page Fragments - ou SPF en abrégé - est un cadre léger qui gère la navigation et les mises à jour des sections de page. Grâce à l'amélioration progressive et au HTML5, SPF met à jour les pages de manière transparente avec un rendu côté serveur. Seuls des fragments de document sont envoyés, et les sections de page correspondantes sont mises à jour de manière asynchrone lorsqu'elles sont reçues.

Answer 3

En regardant ceci Démonstration et regardez les commentaires, certains disent que c'est bien et d'autres que c'est trop compliqué à réaliser.

html :

<div>
  <dt></dt>
  <dd></dd>
</div>

css :

#progress {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: -6px;
    width: 1%;
    height: 2px;
    background: #0088CC;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-transition: width 500ms ease-out,opacity 400ms linear;
    -ms-transition: width 500ms ease-out,opacity 400ms linear;
    -o-transition: width 500ms ease-out,opacity 400ms linear;
    -webkit-transition: width 500ms ease-out,opacity 400ms linear;
    transition: width 500ms ease-out,opacity 400ms linear;
}

#progress dd, #progress dt {
    position: absolute;
    top: 0;
    height: 2px;
    -moz-box-shadow: #0088CC 1px 0 6px 1px;
    -ms-box-shadow: #0088CC 1px 0 6px 1px;
    -webkit-box-shadow: #0088CC 1px 0 6px 1px;
    box-shadow: #0088CC 1px 0 6px 1px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

#progress dt {
    opacity: .6;
    width: 180px;
    right: -80px;
    clip: rect(-6px,90px,14px,-6px);
}

#progress dd {
    opacity: .6;
    width: 20px;
    right: 0;
    clip: rect(-6px,22px,14px,10px);
}  

js :

$(document).ajaxStart(function() {
//only add progress bar if added yet.
  if ($("#progress").length === 0) {
    $("body").append($("<div><dt/><dd/></div>").attr("id", "progress"));
    $("#progress").width((50 + Math.random() * 30) + "%");
  }
});

$(document).ajaxComplete(function() {
//End loading animation
    $("#progress").width("101%").delay(200).fadeOut(400, function() {
      $(this).remove();
    });
});