Neugierig über die neue Art, wie YouTube Seiten lädt

Question

Ich habe bemerkt, wenn ich ein Video ansehe und auf das Logo oder ein ähnliches Video klicke, dass ein roter Fortschrittsbalken (über dem Logo) über den Bildschirm streicht. Zur gleichen Zeit gibt es eine leichte Überlagerung, um den Inhalt "auszugrauen", dann blendet er die neue Seite aus. Zu Ihrer Information: Die URL ändert sich in die neue URL, bevor der Fortschrittsbalken und der Übergang stattfinden.

Die Div-ID dieser Leiste ist ein Fortschritt. Sieht aus wie eine Art coole jQuery-Ajax-Ladung, aber wechselnde Seiten. Ich weiß es nicht.

Answer 1

YouTube wird mit der HTML5 History API Seite URLs zur Geschichte Stack hinzufügen und entfernen. Dies führt dazu, dass sich die URL in der Adressleiste ändert und die Zurück-/Vorwärts-Schaltflächen funktionieren, während die Seite immer noch über JS (Ajax) geladen wird.

Der einfachste Weg, die API mit Abwärtskompatibilität zu diesem Zeitpunkt zu implementieren, ist History.js. Mit der Abwärtskompatibilität meine ich, dass ich für ältere Browser, die die HTML5-History-API noch nicht unterstützen, auf die Hash-Tag-Methode zurückgreifen kann.

Check out the History.js demo!

Ich denke Twitter ist wohl das bekannteste Beispiel einer Website gehasht URLs verwenden. Zum Beispiel ist twitter.com/#!/username seit Jahren ein alltäglicher Anblick. Das Problem bei dieser Methode besteht darin, dass Hash-Tags clientseitig sind. Daher benötigen Sie JS, um sie zu lesen und den richtigen Inhalt zu liefern. Jeder Nicht-JS-Benutzer, der auf eine Hash-URL klickt, landet auf der Startseite von Twitter.

Beatport war übrigens eine der ersten großen Websites, die die HTML5-History-Technik verwendeten. SoundCloud hat es kürzlich auch implementiert. Beide Websites benötigten HTML5-Verlauf, um die Audiowiedergabe sicherzustellen, während Besucher durch die Seiten blättern.

Answer 2

an diesem demo suchen, vielleicht könnte Ihnen helfen, und bei den Kommentaren sehen, sagen einige nette, während einige zu sagen erschweren es

html zu erreichen:

<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(); 
    }); 
}); 

Answer 3

Youtube verfügt über eine Open-Source-Bibliothek, die für die dynamische Navigation spfjs verwendet wird.

Strukturierte Seitenfragmente - oder kurz SPF - ist ein leichtes JS-Framework für schnelle Navigation und Seitenaktualisierungen von YouTube.

Mit der progressiven Erweiterung und HTML5 integriert sich SPF in Ihre Website, um eine schnellere, flüssigere Benutzererfahrung zu ermöglichen, indem nur die Abschnitte der Seite aktualisiert werden, die sich während der Navigation ändern, nicht die ganze Seite. SPF bietet ein Antwortformat zum Senden von Dokumentfragmenten, ein robustes System für die Skript- und Stilverwaltung, einen In-Memory-Cache, eine On-the-Fly-Verarbeitung und vieles mehr.