加载多个嵌入式Youtube视频时,页面加载性能更佳？

Question

我有一个显示多个(通常是10个)嵌入视频的页面.视频使用youtube的新IFRAME嵌入代码,显然每个IFRAME在加载页面时都有单独的请求.有没有办法在加载页面的其余部分后推迟加载视频,这样它们不会减慢页面加载的速度？

Answer 1

好吧,我写了一个javascript thingy(称为"LYTE"),它将创建一个"虚拟玩家"(看起来和感觉就像普通的YouTube嵌入一样),每个div都有一个特定的类("lyte")和id-与YouTube- ID.只有在点击"虚拟"播放器时,才会加载实际的YouTube iframe,这确实会对嵌入YouTube视频的网页的效果产生重要影响.你可以在我的博客上看到它.

LYTE目前还没有真正独立,仅作为WP-YouTube-Lyte(我编写的WordPress插件)的一部分,但只需更改,您应该能够从插件中提取所有相关代码.

你基本上必须在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添加一个eventlistener,它将触发div的替换单击时使用真正的嵌入式播放器.

你可以找到该插件在这里,并期待在代码这里(WP-的YouTube-lyte.php创建DIV,LYTE/lyte.js是实际的JavaScript ...啄).

Answer 2

查看此解决方案:按需加载YouTube视频播放器

基本上,这就像点击一些缩略图时用jQuery替换你的YouTube视频iframe播放器代码一样.