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

Question

我注意到，当我在观看视频时，单击徽标或相关视频时，屏幕上会出现红色进度条（徽标上方）。同时，有一个轻微的覆盖将内容“变灰”，然后在新页面中淡出。仅供参考，在进度条和转换发生之前，URL 会更改为新的 URL。

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

Answer 1

YouTube 正在使用HTML5 History API向历史堆栈添加和删除页面 URL。这会导致地址栏中的 URL 发生变化，并且后退/前进按钮工作，同时仍然通过 JS (ajax) 实际加载页面。

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

查看 History.js 演示！

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

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

Answer 2

Youtube 已经开源了他们用于动态导航的库spfjs。

Structured Page Fragments - 或简称 SPF - 是一个轻量级的 JS 框架，用于从 YouTube 快速导航和页面更新。

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

Answer 3

看看这个演示，也许可以帮助你，看看评论，有些人说很好，有些人说太复杂而无法实现

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