Я заметил, когда смотрю видео, и я нажимаю на логотип или связанное с ним видео, что красная полоса хода (над логотипом) мигает по экрану. В то же время есть небольшое наложение на "серый" контент, затем он исчезает на новой странице. FYI, URL-адрес изменяется на новый URL-адрес перед индикатором выполнения и происходит переход.
Идентификатор div этого бара является прогрессом. Похоже, какая-то классная загрузка jQuery ajax, но смена страниц. Я не знаю.
YouTube использует API истории HTML5 для добавления и удаления URL-адресов страниц в стек истории. Это приводит к изменению URL-адреса в адресной строке и кнопкам "назад/вперед", но при этом фактически загружает страницу через JS (ajax).
Самый простой способ реализовать API с обратной совместимостью на данный момент - с помощью History.js. По обратной совместимости я имею в виду возврат к методу хэш-тегов для старых браузеров, которые еще не поддерживают API истории HTML5.
Посмотрите демоверсию History.js!
Я думаю, что Twitter - это, вероятно, самый известный пример веб-сайта с использованием хэшированных URL-адресов. Например, twitter.com/#!/username был обычным явлением в течение многих лет. Проблема с этим методом заключается в том, что хэш-теги являются клиентскими, поэтому вам нужно, чтобы JS читал их и обслуживал надлежащий контент. Любой пользователь, не являющийся пользователем JS, нажавший хешированный URL, просто приземлится на главной странице Twitter.
Beatport был одним из первых крупных сайтов, использующих технику истории HTML5. SoundCloud недавно также внедрил его. Оба сайта нуждались в истории HTML5, чтобы обеспечить воспроизведение звука, когда посетители просматривают страницы.
Youtube открыла библиотеку, которую они используют для динамической навигации под названием spfjs.
Структурированные фрагменты страницы - или SPF для краткости - это легкая структура JS для быстрой навигации и обновлений страниц с YouTube.
Используя прогрессивное усовершенствование и HTML5, SPF интегрируется с вашим сайтом, чтобы обеспечить более быструю и гибкую работу пользователей, обновляя только разделы страницы, которые изменяются во время навигации, а не всю страницу. SPF предоставляет формат ответа для отправки фрагментов документа, надежную систему для script и управления стилем, кеш в памяти, обработку "на лету" и т.д.
глядя на эту демонстрацию, может быть, может помочь вам, и посмотрите на комментарии, некоторые говорят, что приятно, в то время как некоторые говорят, что это слишком сложно для ее достижения
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();
});
});