对 YouTube 加载页面的新方式感到好奇 [英] Curious about the new way YouTube is loading pages

查看:28
本文介绍了对 YouTube 加载页面的新方式感到好奇的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I've noticed when I'm watching a video and I click on the logo or a related video that a red progress bar (above the logo) dashes across the screen. At the same time there is a slight overlay to "grey" out the content then it fades in the new page. FYI, the URL changes to the new URL before the progress bar and transition happens.

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

The div ID of that bar is progress. Looks like some kind of cool jQuery ajax load but changing pages. I don't know.

推荐答案

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

YouTube is using the HTML5 History API to add and remove page URLs to the history stack. This results in the URL changing in the address bar, and the back/forward buttons working, while still actually loading the page via JS (ajax).

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

The easiest way to implement the API with backwards compatibility at this point is by using History.js. By backwards compatibility I mean falling back to the hash tag method for older browsers that do not support the HTML5 History API yet.

查看 History.js 演示!

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

I think Twitter is probably the best known example of a website using hashed URLs. For example twitter.com/#!/username has been a common sight for years. The problem with this method is that hash tags are client side, thus you need JS to read them and serve the proper content. Any non-JS user clicking a hashed URL will just land on Twitter's homepage.

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

Beatport was one of the first major websites using the HTML5 History technique by the way. SoundCloud has recently implemented it too. Both sites needed HTML5 History badly, to ensure audio playback while visitors browse through pages.

这篇关于对 YouTube 加载页面的新方式感到好奇的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆