第一次尝试延迟加载(推迟嵌入式YouTube视频的加载)--我如何更优雅地做到这一点？
昨天，我决定改进我的网站加载YouTube视频的方式，只在用户请求时嵌入它们。有时，一个页面可能有多达30个视频，这将需要很长的时间来加载。
这是我第一次尝试一种“懒散加载”的方法，我认为这很值得一问：
，我能做些什么来改进这一点？
，我怎么才能让它更优雅呢？
是否完全忽略了延迟加载的问题？
JSFiddle。
忽略造型，因为这是不相关的这里。
这样做的方式是首先在包含视频ID的页面上放置一个锚：
<a href="#" data-video="FzRH3iTQPrk" class="youtube-video">然后，后面的jQuery循环遍历每个a.youtube-video并创建一个透明的跨度，以视频的缩略图为背景：
$('a.youtube-video').each(function() {
var videoId = $(this).attr('data-video');
var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
var videoBackground = $('<span class="youtube-thumbnail"></span>');
videoBackground.css({
background:"#fff url('"+videoThumbnail+"') no-repeat"
})
...然后修改锚标记的样式(在这里这样做是为了防止禁用JavaScript的浏览器)：
$(this).css({
height:315,
width:460,
position:"relative",
display:"block",
textAlign:"center",
color:"#fff",
fontSize:26
});然后，它通过将span添加到锚中来完成循环：
$(this).text('Click to load video');
$(this).append(videoBackground);
});嵌入式YouTube视频对象的加载发生在锚点单击：
$('a.youtube-video').click(function(e) {
e.preventDefault();
var videoId = $(this).attr('data-video');
var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
var videoEmbed = $('<object> ... </object>');
...这通过将嵌入代码添加到锚的父节点并移除锚来完成：
$(this).parent().append(videoEmbed);
$(this).hide();
});回答 2
Stack Overflow用户
发布于 2013-02-25 15:48:13
您应该设置href，以便人们知道他们将要加载什么。这可以在生成页面时或在JS中对a元素执行。如果您想让页面为禁用Javascript的人工作，则必须在元素上。
var url = "http://www.youtube.com/watch?v=" + videoId;
$(this).attr('href', url);您还应该告诉人们，如果他们通过设置一个标题来单击其中之一，将会发生什么：
$(this).attr('title', "Click to play video");或者创建一个类似于SMH的覆盖层，这使得点击图像将播放视频变得更加明显。或者两者都有。
另外，当人们按住ctrl或命令键时，您不应该破坏在新窗口中打开的东西。我更新了小提琴，但基本上在您需要的单击事件中：
var isCtrlPressed = e.ctrlKey || e.metaKey;
if (isCtrlPressed == true){
return;
} 我知道您说过忽略样式，但是如果占位符的背景色与页面的背景明显不同，我更喜欢它。如果一个页面加载速度慢，那么我可以看出有什么东西会被加载到那里，而不仅仅是一个空白的页面。
这是否完全忽略了延迟装载的问题？
不完全是，但在这种情况下，这有点毫无意义。当正在加载的内容非常复杂(例如，一个庞大的表)时，通常使用延迟加载，这样会大大增加页面的大小，这将使页面的初始呈现在用户跟踪链接之后很长一段时间。
尽管youtube视频的加载速度可能很慢，但它们不应该在此期间阻止页面的其他部分加载和呈现，因此延迟加载视频只会给您带来很小的好处。
我想你应该测量一个人看网页的速度，滚动到底部，然后点击播放最后一个视频。如果延迟加载的速度更快，因为其他视频闪存播放器没有加载，那么它还是值得的。
Stack Overflow用户
发布于 2013-02-26 02:11:52
下面是对代码这里的篡改。(播放器没有正确显示，我认为jsfiddle不适合“嵌入方法”。我知道它适用于使用iframe方法的jsfiddle，但是您提到您想要避免iframes)。
正如前面提到的，一个很大的改进就是使用swfobject来生成播放器嵌入。使用此方法时，必须为player元素创建占位符。单击链接时，占位符将被移除并替换为embed。我强烈建议为链接和播放器创建一个父div。为了防止在生成embed时调整元素的大小，还应该显式地设置容器元素的宽度/高度。
我认为这是延迟装船的好方法。虽然闪存播放器不阻塞加载，他们仍然使用大量的资源，我会感谢一个页面，最初显示为缩略图集。
标记
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>
<div class="container">
<div id="placeholder_FzRH3iTQPrk"></div>
<a href="#" data-video="FzRH3iTQPrk" class="youtube-video"></a>
</div>
<div class="container">
<div id="placeholder_go43XeW6Wg4"></div>
<a href="#" data-video="go43XeW6Wg4" class="youtube-video"></a>
</div>JavaScript
$(document).ready(function() {
$('a.youtube-video').each(function() {
var videoId = $(this).attr('data-video');
var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
var videoBackground = $('<span class="youtube-thumbnail"></span>');
videoBackground.css({
background:"#fff url('"+videoThumbnail+"') no-repeat"
});
// also set the parent container size to prevent flicker
$(this).add($(this).parent()).css({
height:315,
width:460,
position:"relative",
display:"block",
textAlign:"center",
color:"#fff",
fontSize:26
});
$(this).text('Click to load video');
$(this).append(videoBackground);
});
$('a.youtube-video').click(function(e) {
e.preventDefault();
var videoId = $(this).attr('data-video');
var params = { allowScriptAccess: "always", allowFullScreen: "true" };
var atts = { id: 'player_'+videoId };
$(this).hide();
swfobject.embedSWF(
"http://www.youtube.com/v/"+videoId+"?enablejsapi=1&playerapiid=ytplayer&version=3",
'placeholder_'+videoId, "460", "315", "8", null, null, params, atts);
});
});https://stackoverflow.com/questions/14956112
复制相似问题
腾讯云开发者
