如何修复视频导致页面加载时间变慢

我有一个客户，要求在其主页上自动播放视频。 通常，我们作为设计师的工作是将我们大脑中的第一想法

“我的天哪。 这是什么鬼？ 你想把用户赶走，永远不再回来吗？”

转换成类似

“我不确定这是否是目前最好的主意。 一些人发现网站上的自动播放视频很烦人，我们的目标是让用户留在网站上，以便他们可以更多地了解您。”

但有时会变成

“好的，先生。”

好吧，不能每次都如愿以偿。 因此，我做了。 我甚至找到一个很棒的小型 Flash 视频播放器，它可以实现人们在视频播放器中喜欢的所有酷炫功能，例如拖动、全屏模式和音量控制。 我甚至在默认情况下静音了视频，至少用户不会被不需要的声音轰炸。

但几天后我接到了电话

“为什么我们的主页加载速度变慢了？！”

再次回到大脑

“呃，因为现在你的主页上有一个 5MB 的视频，即使它正在流式传输，它仍然会占用你的网络连接，并且会使其他所有内容加载速度变慢。”

这应该翻译成

“我马上就会调查这个问题。 我怀疑这与我们添加到主页上的视频有关，也许我们需要重新考虑一下。”

这变成了

“我马上就处理。 对不起，先生。”

 

解决问题

因此，正如我们的大脑迅速推断的那样，这里的问题是，将如此大的文件放在我们的页面上会减慢也在同时尝试加载的其他页面元素的速度。 那么，解决方案是确保视频在页面其余部分加载之后再加载。

为了做到这一点，我们将完全从页面中删除视频代码。 然后仅通过 JavaScript 动态添加它。 从技术上讲，我想，AJAX。 通过 JavaScript 执行此操作的好处是，我们能够等待整个页面加载的事件，然后再进行动态添加。

首先，我们在页面上为视频创建一个位置。 一个空的 div 就可以了

<div id="movie-area">
</div>

这样我们就可以使用 CSS 为该区域设置样式。 这是一个好主意，这样当视频被添加时，它不会突然将内容移出该区域来为自己腾出空间。 我们还将使该区域变为黑色，更像电影

#movie-area {
	width: 320px;
	height: 240px;
	background: black;
}

空 div 的另一个原因是，我们可以将其作为 JavaScript 的目标区域，用于插入视频代码。 让我们编写一个简单的 JavaScript 代码来完成这项工作

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(window).bind("load", function() {  
	$('#movie-area').load('movie.html');
}); 
</script>

我正在使用 jQuery 来执行此操作。 jQuery 使这项工作变得更加容易。 以上代码，用通俗易懂的语言来说：“等待整个页面加载，然后找到 id 为“movie-area”的 div，然后获取文件“movie.html”并将它的内容插入到找到的 div 中。 “movie.html”文件当然会包含我想要的视频的任何标记。 可能是某种对象或脚本。

效果很好。

查看演示
注意：演示在视频上方有一个大图像。 此图像需要加载一段时间 - 因此您可以看到视频如何在该图像加载完成后再加载。