Ciekawi Cię nowy sposób wczytywania strony przez YouTube

Question

Zauważyłem, że podczas oglądania filmu klikam logo lub powiązany film, że czerwony pasek postępu (nad logo) przesuwa się po ekranie. W tym samym czasie pojawia się lekka nakładka na "szare" treści, a następnie znika na nowej stronie. FYI, adres URL zmienia się na nowy adres URL przed pojawieniem się paska postępu i przejścia.

Identyfikator div tego paska to postęp. Wygląda jak ładowanie jQuery ajax, ale zmieniające się strony. Nie wiem

Answer 1

YouTube używa HTML5 History API do dodawania i usuwania stron URL do historii stosie. Powoduje to zmianę adresu URL na pasku adresu i przyciski wstecz/dalej działające, podczas gdy wciąż ładują stronę za pomocą JS (ajax).

Najprostszym sposobem zaimplementowania interfejsu API z kompatybilnością wsteczną w tym miejscu jest użycie History.js. Zgodność wsteczna oznacza powrót do metody tagów hashowych w starszych przeglądarkach, które nie obsługują jeszcze interfejsu API historii HTML5.

Check out the History.js demo!

myślę Twitter jest prawdopodobnie najbardziej znanym przykładem stronie używając zakodowane adresy URL. Na przykład twitter.com/#!/username był powszechnym widokiem od lat. Problem z tą metodą polega na tym, że tagi hash są po stronie klienta, dlatego potrzebujesz JS, aby je odczytać i wyświetlać właściwą treść. Każdy użytkownik spoza JS, który kliknie zakodowany URL, wyląduje na stronie głównej Twittera.

Beatport była jedną z pierwszych dużych stron internetowych wykorzystujących technikę historii HTML5. SoundCloud niedawno ją zaimplementował. Obie witryny potrzebowały historii HTML5, aby zapewnić odtwarzanie dźwięku podczas przeglądania stron.

Answer 2

patrząc na ten demo, to może pomóc, i spojrzeć na komentarze, niektórzy mówią miłe, gdy niektórzy twierdzą, zbyt skomplikowane, aby osiągnąć to

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

Answer 3

Youtube ma otwartą bibliotekę, której używają do dynamicznej nawigacji o nazwie spfjs.

Fragmenty strony strukturalnej - lub SPF w skrócie - to lekkie framework JS do szybkiej nawigacji i aktualizacji strony z YouTube.

Korzystanie z funkcji stopniowego ulepszania i HTML5, SPF integruje się z witryną, aby umożliwić szybsze i bardziej płynne korzystanie z witryny przez aktualizowanie tylko sekcji strony, które zmieniają się podczas nawigacji, a nie całej strony. SPF zapewnia format odpowiedzi do wysyłania fragmentów dokumentów, solidny system do zarządzania skryptami i stylami, pamięć podręczną w pamięci, przetwarzanie "w locie" i wiele innych.