有朋友们问网页顶部进度条 如何应用,现在github 大部分国外网站 都在用,
比如youtobe:
前些时候有注意到YouTube网站放出的新特性,那就是在视频页面间切换时,页面顶部会有一道华丽丽的红色激光脉冲掠过。
以下截图内容来自 刘家勇博客。
那不是其他什么为了炫技的东西,它是一个进度条,平时我们见了千百遍经常以转圈形式出现的进度条。当然谷歌对于进度展示的创新不止于此啦,比如用于谷歌加的下载gif也是很有新意的一个玩意儿。
但YouTube这个进度条似乎更具创新,让人觉得相当惊艳。
所以好奇的我按捺不住想要拔开它神秘面纱的心情。
大体来看用了以下技术:
- Ajax:首先页面内容的加载使用的是Ajax异步请求,所以页头那个激光元素可以在内容请求与接收过程中得以展示,不然的话整个页面刷新那就无法实现了;
- HTML5 History API: 其次我注意到页面地址也是跟着变的。前面提到整个页面是没有刷新的(一个不太靠谱的方法可以验证这点是显示网站favicon的地方没有出现