标准的复制粘贴 YouTube 嵌入内容在您的页面上以 <iframe>
的形式呈现,它加载大量其他内容来播放该视频。但它的 UX 本质上仍然是一个图像和一个播放按钮。单击播放按钮,视频就会播放。您可以使用包含图像的锚链接构建本质上相同的内容!
不久前,我们介绍了 来自 Arthur Corenzan 的一个非常巧妙的“延迟加载”技术,它正是这样做的,并且由 Remy Sharp 和 Adrian Roselli 进一步改进。
Paul Irish 也使用 <lite-youtube>
web 组件解决了这个问题。
提供视频,将重点放在视觉性能上。这个自定义元素的呈现方式与真实元素相同,但速度大约快 224 倍。
在 源代码 中,Paul 还挖掘了一些其他之前的尝试,比如 这个 jQuery 插件 和 一个更通用的脚本,用于延迟加载任何 iframe。