在本教程中,我将说明如何“延迟加载”多个嵌入式YouTube视频。 这样做将改善我们初始页面加载的性能,并将一些功能移交给用户。
延迟加载
嵌入YouTube视频对于任何与网络相关的人来说已经成为完全正常的过程。 复制,粘贴,完成。 但是,引入诸如YouTube视频之类的外部资源可能会降低网页的加载性能,尤其是在同一页面上嵌入两个或更多视频的情况下。
通过嵌入视频,我们不仅需要视频文件,还可以请求更多内容。 获取了许多资源,包括JavaScript文件,样式表,图像和广告。 从下面的屏幕截图中可以看到,两个Youtube视频相当于22个HTTP请求,总共下载了624kb。 随着我们在页面上嵌入更多视频,这些数字将不断攀升。
因此,我们不会在页面加载后立即加载Youtube视频,而是会在用户要求时播放视频。 此方法通常称为延迟加载 -它将在初始页面加载时最小化HTTP请求,并最终提高页面的性能。
事不宜迟,让我们开始吧。
1. HTML结构
我们从构建HTML开始。 这是直截了当的; 我们只使用了两个div
元素。 第一个div
将环绕嵌入的Youtube视频,第二个div
嵌套在第一个div
,我们将使用它来塑造“ 播放”按钮,以说明这是可播放的视频。
<!-- (1) video wrapper -->
<div class="youtube" data-embed="AqcjdkPMPJA">
<!-- (2) the "play" button -->
<div class="play-button"></div>
</div>
从上面的代码片段中可以看到,我们在这些div
元素中添加了一个class
,并在第一个div
添加了data-
属性,以指定要嵌入的YouTube视频的ID。
2. CSS
接下来,我们添加样式: