对YouTube加载页面的新方式感到好奇

Question

我注意到当我正在观看视频时，我点击徽标或相关视频，红色进度条（徽标上方）在屏幕上划线。同时，内容“灰色”略有叠加，然后在新页面中消失。仅供参考，URL会在进度条和转换发生之前更改为新URL。

该栏的div ID是进度。看起来像某种很酷的jQuery ajax加载但更改页面。我不知道。

Answer 1

YouTube正在使用HTML5 History API向历史记录堆栈添加和删除页面网址。这导致地址栏中的URL更改，后退/前进按钮正常工作，同时仍然通过JS（ajax）实际加载页面。

此时使用向后兼容性实现API的最简单方法是使用History.js。通过向后兼容性，我的意思是回退到不支持HTML5历史记录API的旧浏览器的哈希标记方法。

Check out the History.js demo!

我认为Twitter可能是使用散列网址的网站最着名的例子。例如，twitter.com/#!/username多年来一直是常见的景象。这种方法的问题是哈希标签是客户端，因此你需要JS来读取它们并提供适当的内容。点击散列URL的任何非JS用户都将登陆Twitter的主页。

Beatport是最早使用HTML5历史记录技术的主要网站之一。 SoundCloud最近也实现了它。这两个网站都非常需要HTML5历史记录，以确保在访问者浏览网页时播放音频。

Answer 2

Youtube开源了他们用于动态导航的库，名为spfjs。

  

结构化页面碎片 - 或简称SPF--是一个轻量级的JS框架，用于从YouTube进行快速导航和页面更新。

     

使用渐进增强功能和HTML5，SPF可与您的网站集成，通过仅更新导航期间更改的页面部分而非整个页面，实现更快，更流畅的用户体验。 SPF提供了用于发送文档片段的响应格式，用于脚本和样式管理的强大系统，内存缓存，即时处理等。

Answer 3

看着这个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();
    });
});