Любопытно, как YouTube загружает страницы

Question

Я заметил, что когда смотрю видео, я нажимаю на логотип или связанное с ним видео, на котором красная полоса хода (над логотипом) мигает по экрану. В то же время есть небольшое наложение на «серый» контент, затем он исчезает на новой странице. FYI, URL-адрес изменяется на новый URL-адрес перед индикатором выполнения и происходит переход.

Идентификатор div этого бара является прогрессом. Похоже, какая-то классная загрузка jQuery ajax, но смена страниц. Я не знаю.

Answer 1

YouTube использует HTML5 History API для добавления и удаления страниц URL-адресов в стек истории. Это приводит к изменению URL-адреса в адресной строке и кнопкам «назад/вперед», а при загрузке страницы через JS (ajax).

Самый простой способ реализовать API с обратной совместимостью на данный момент - использовать History.js. По обратной совместимости я имею в виду возврат к методу хэш-тегов для старых браузеров, которые пока не поддерживают API истории HTML5.

Check out the History.js demo!

Я думаю, Twitter, вероятно, самый известный пример веб-сайта с использованием хэш-адреса. Например, twitter.com/#!/username был обычным явлением в течение многих лет. Проблема с этим методом заключается в том, что хэш-теги являются клиентскими, поэтому вам нужно, чтобы JS читал их и обслуживал надлежащий контент. Любой пользователь, не являющийся пользователем JS, нажавший хешированный URL-адрес, просто приземлится на главной странице Twitter.

Beatport был одним из первых крупных сайтов, использующих технику истории HTML5. SoundCloud недавно также внедрил его. Оба сайта нуждались в истории HTML5, чтобы обеспечить воспроизведение аудио, пока посетители просматривают страницы.

Answer 2

глядя на эту demo, возможно может помочь вам, и смотреть на комментарии, некоторые говорят, что хорошо, а некоторые говорят, что слишком усложняют, чтобы достичь его

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 есть библиотека с открытым исходным кодом, которую они используют для динамической навигации, называемой spfjs.

Структурированные страницы Фрагменты - или SPF для краткости - это легкая структура JS для быстрой навигации и обновления страниц с YouTube.

Используя прогрессивное усовершенствование и HTML5, SPF интегрируется с вашим сайтом, чтобы обеспечить более быструю и удобную работу пользователей, обновляя только разделы страницы, которые изменяются во время навигации, а не всю страницу. SPF предоставляет формат ответа для отправки фрагментов документа, надежную систему управления сценариями и стилями, кеш в памяти, обработку «на лету» и т. Д.