jquery – 首次尝试延迟加载(推迟嵌入的YouTube视频的负载)

昨天我决定改进我的网站加载YouTube视频的方式,只需在用户请求时嵌入它们.有时一个页面可能有多达30个视频,这需要很长时间才能加载.

这是我第一次尝试“延迟加载”方法的任何东西,我认为这是值得问的：

我该怎么做才能改善这个？

我怎样才能让它更优雅一点？

这完全错过了延迟加载的点吗？

忽略样式,因为这与此无关.

这种方式的工作方式是首先在包含视频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();
});

解决方法

你应该设置href,以便人们知道他们将要加载什么.这可以在生成页面时在a元素上完成,也可以在JS中完成.如果您希望页面适用于禁用Javascript的用户,则必须在元素上.

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播放器没有加载,那么它仍然值得.

jquery – 首次尝试延迟加载(推迟嵌入的YouTube视频的负载) – 我怎样才能更优雅地做到这一点？

解决方法

相关文章