Curieux au sujet de la nouvelle façon de YouTube est le chargement des pages

YouTube est à l'aide de la HTML5 Histoire de l'API pour ajouter et supprimer des Url de pages à l'histoire de la pile. Cela se traduit dans l'URL en train de changer dans la barre d'adresse, et les boutons précédent et suivant de travail, alors que encore du chargement de la page via JS (ajax).

La façon la plus simple à mettre en œuvre l'API avec rétro-compatibilité, en ce moment, en utilisant History.js. Par rétro-compatibilité, je veux dire de revenir à la méthode de la balise de hachage pour les anciens navigateurs qui ne prennent pas en charge le HTML5 Histoire de l'API encore.

Découvrez l'History.js démo!

Je pense que Twitter est probablement le meilleur exemple connu d'un site web en utilisant haché Url. Par exemple twitter.com/#!/username a été un spectacle fréquent pendant des années. Le problème avec cette méthode est que les balises de hachage sont côté client, donc vous avez besoin de JS pour les lire et de servir le bon contenu. Tout non-JS l'utilisateur a cliqué sur un hash de l'URL sera juste atterrir sur Twitter de la page d'accueil.

Beatport a été l'un des premiers grands sites web en utilisant le HTML5 Histoire de la technique par la voie. SoundCloud a récemment mis en œuvre aussi. Les deux sites nécessaires HTML5 Histoire mal, pour s'assurer de lecture audio alors que les visiteurs de naviguer à travers les pages.

en regardant ce démo, peut-être pourrait vous aider, et regardez les commentaires, certains disent que nice alors que certains disent trop compliquer à 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();
    });
});