Ciekawy nowego sposobu wczytywania stron przez YouTube

Zauważyłem, gdy oglądam film i klikam na logo lub Powiązane wideo, że czerwony pasek postępu (nad logo) kreska na ekranie. Jednocześnie jest niewielka nakładka na "szarą" treść, a następnie zanika na nowej stronie. Dla twojej wiadomości, adres URL zmienia się na nowy adres URL, zanim nastąpi pasek postępu i przejście.

Identyfikator div tego paska to progress. Wygląda jak jakiś fajny jQuery ajax load ale zmiana stron. Nie wiem.

Tutaj wpisz opis obrazka

 60
youtube
Author: kel, 2013-04-05
Source

3 answers

YouTube używa HTML5 History API do dodawania i usuwania adresów URL stron do stosu historii. Powoduje to zmianę adresu URL na pasku adresu, a przyciski wstecz/do przodu działają, jednocześnie faktycznie ładując stronę za pośrednictwem JS (ajax).

Najprostszym sposobem na zaimplementowanie API z kompatybilnością wsteczną w tym momencie jest użycie History.js . Przez kompatybilność wsteczną mam na myśli powrót do metody hash tag dla starszych przeglądarek, które nie obsługują HTML5 Historia API jeszcze.

Sprawdź historię.js demo!

Myślę, że Twitter jest prawdopodobnie najbardziej znanym przykładem strony internetowej używającej haszowanych adresów URL. Na przykład twitter.com/#!/username jest częstym widokiem od lat. Problem z tą metodą polega na tym, że tagi hash są po stronie klienta, dlatego potrzebujesz JS, aby je przeczytać i podać odpowiednią treść. Każdy użytkownik spoza JS, który kliknie zaszyfrowany adres URL, wyląduje na stronie głównej Twittera.

Beatport był jednym z pierwszych dużych serwisów internetowych wykorzystujących Technika historii HTML5 przy okazji. SoundCloud również niedawno go wdrożył. Obie strony bardzo potrzebowały historii HTML5, aby zapewnić odtwarzanie dźwięku podczas przeglądania stron przez odwiedzających.

 45
Author: Robbert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-15 22:37:16

Youtube udostępnił otwartą bibliotekę używaną do dynamicznej nawigacji o nazwie spfjs .

Structured Page Fragments - lub w skrócie SPF-to lekki framework JS do szybkiej nawigacji i aktualizacji stron z YouTube.

Za pomocą progressive enhancement i HTML5, SPF integruje się z witryną, aby umożliwić szybsze, bardziej płynne korzystanie z witryny, aktualizując tylko sekcje strony, które zmieniają się podczas nawigacji, a nie całą stronę. SPF zapewnia odpowiedź format wysyłania fragmentów dokumentów, solidny system zarządzania skryptami i stylami, pamięć podręczna w pamięci, przetwarzanie w locie i wiele innych.

 10
Author: Olim Saidov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-16 07:56:10

Patrząc na to demo , może Ci pomoże, i spójrz na komentarze, niektórzy mówią ładnie, a niektórzy mówią zbyt skomplikowane, aby to osiągnąć

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();
    });
});
 7
Author: xguox,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-07 13:35:03