performance - 加载多个嵌入式Youtube视频时，页面加载性能更好吗？

Question

我有一个页面，其中显示多个(通常为10个)嵌入式视频。这些视频使用了YouTube的新IFRAME嵌入代码，显然，对于每个IFRAME，加载页面时都会有一个单独的请求。有没有一种方法可以在页面其余部分加载后推迟加载视频，这样它们就不会减慢页面加载速度了吗？

Answer 1

好吧，我写了一个JavaScript的东西(称为“LYTE”)，它将为每个具有特定类别(“lyte”)和id的div创建一个“虚拟播放器”(看起来和感觉像是普通的YouTube嵌入视频) ID。仅当单击“虚拟”播放器时，实际的YouTube iframe才会加载，并且确实会对嵌入YouTube视频的页面的性能产生重要影响。您可以在操作on my blog中看到它。

LYTE目前还不是真正可以单独使用，仅作为WP-YouTube-Lyte, the WordPress plugin I wrote的一部分提供，但是只需进行很少的更改，您就可以从插件中提取所有相关的代码。

基本上，您必须在HTML中创建类似的内容。

<div class="lyte" id="7nuiOe8M6bw" style="width:640px;height:385px;">
<script type="text/javascript"><!-- 
var nT='newtube-';var bU='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/';
var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert}
function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='http://static.blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}}; 
 --></script></div>

该块将加载lyte-min.js，它将用虚拟播放器的所有图形元素(图像，播放按钮，控制栏，标题)填充div，并向div添加一个事件监听器，以触发div的替换单击时使用真正的嵌入式播放器。

您可以找到插件 here并查看代码 here(wp-youtube-lyte.php创建div，lyte / lyte.js是实际的javascript ...有点)。