lite-youtube-embed

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程各个阶段的云产品。立即开始使用 $200 免费积分!

标准的复制粘贴 YouTube 嵌入内容在您的页面上以 <iframe> 的形式呈现,它加载大量其他内容来播放该视频。但它的 UX 本质上仍然是一个图像和一个播放按钮。单击播放按钮,视频就会播放。您可以使用包含图像的锚链接构建本质上相同的内容!

不久前,我们介绍了 来自 Arthur Corenzan 的一个非常巧妙的“延迟加载”技术,它正是这样做的,并且由 Remy Sharp 和 Adrian Roselli 进一步改进。

Paul Irish 也使用 <lite-youtube> web 组件解决了这个问题。

提供视频,将重点放在视觉性能上。这个自定义元素的呈现方式与真实元素相同,但速度大约快 224 倍。

源代码 中,Paul 还挖掘了一些其他之前的尝试,比如 这个 jQuery 插件一个更通用的脚本,用于延迟加载任何 iframe。

直接链接 →