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

Question

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

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

Answer 1

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

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

查看History.js演示!

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

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

Answer 2

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

结构化页面片段(简称SPF)是一个轻量级的JS框架,用于从YouTube快速导航和页面更新.

使用渐进增强和HTML5,SPF与您的网站集成,通过仅更新导航期间更改的页面部分而不是整个页面,实现更快,更流畅的用户体验.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();
    });
});