这是我第一次尝试“延迟加载”方法的任何东西,我认为这是值得问的：
我该怎么做才能改善这个？
我怎样才能让它更优雅一点？
这完全错过了延迟加载的点吗？
忽略样式,因为这与此无关.
这种方式的工作方式是首先在包含视频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();
});
解决方法
var url = "http://www.youtube.com/watch?v=" + videoId;
$(this).attr('href',url);
您还应该告诉人们如果通过设置标题点击它会发生什么：
$(this).attr('title',"Click to play video");
或者通过创建像SMH那样的叠加层,这样可以更明显地点击图像来播放视频.或两者.
当人们按住ctrl或命令键时,你也不应该在新窗口中打开东西.我更新了fiddle但基本上在您需要的点击事件中：
var isCtrlPressed = e.ctrlKey || e.metaKey;
if (isCtrlPressed == true){
return;
}
我知道你说忽略了样式,但是如果占位符的背景颜色明显不同于页面的背景,我更喜欢它.如果页面加载速度很慢,我可以告诉它会在那里加载某些东西,而不是只是一个空白的页面.
Does this completely miss the point of deferred loading?
不完全,但在这种情况下它略显无意义.延迟加载通常在被加载的东西非常复杂时使用(例如一个大型表),因此会大大增加页面大小,这会使用户在关注链接后很长时间内对页面进行初始渲染.
虽然youtube视频的加载速度可能很慢,但在此期间它们实际上不应阻止页面的其余部分加载和渲染,因此推迟加载视频只会给你带来很小的好处.
我想你应该测量某人查看页面的速度,滚动到底部,然后点击播放最后一个视频.如果延迟加载速度更快,因为其他视频flash播放器没有加载,那么它仍然值得.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。