加载多个嵌入式YouTube视频时，页面加载性能更好吗？ [英] Better page load performance when loading multiple embedded Youtube videos?

问题描述

我有一个页面，其中显示多个（通常为10个）嵌入式视频。这些视频使用了YouTube的新IFRAME嵌入代码，显然，对于每个IFRAME，加载页面时都会有一个单独的请求。

I have a page which displays multiple (usually 10) embedded videos. The videos use the new IFRAME embed code of youtube and apparently for every IFRAME there is a separate request when loading the page. Is there a way to defer loading the videos after the rest of the page is loaded, so they don't slow down page loading that much?

推荐答案

推荐答案

好吧，我写了一个JavaScript脚本（称为 LYTE），它将为每个具有特定类（ lyte）的div创建一个虚拟播放器（看起来像是嵌入了普通的YouTube）和ID与YouTube ID。仅当单击虚拟播放器时，实际的YouTube iframe才会加载，并且确实会对嵌入YouTube视频的页面的性能产生重要影响。您可以在我的博客上看到它。

LYTE is currently not really available standalone, only as part of WP-YouTube-Lyte, the WordPress plugin I wrote, but with minimal changes you should be able to extract all relevant code from the plugin.

LYTE目前还不是真正可以独立使用，仅作为 WP-YouTube- Lyte，我写的WordPress插件，但是只需进行很小的改动，您就应该能够从插件中提取所有相关代码。

You basically have to create something like this in your 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中添加一个事件监听器，当单击该事件时，将触发用真正的嵌入式播放器替换div。

This block will load lyte-min.js, which will fill the div with all graphical elements of the dummy player (image, play button, control bar, title) and will add an eventlistener to the div that will trigger the replacement of the div with the real embedded player when clicked.

您可以在此处找到插件，并查看代码此处（wp-youtube-lyte.php创建div， lyte / lyte.js是实际的javascript。。。

You can find the plugin here and look at the code here (wp-youtube-lyte.php creates the div, lyte/lyte.js is the actual javascript ... thingy).

这篇关于加载多个嵌入式YouTube视频时，页面加载性能更好吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！