5

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

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

我能做些什么来改善这一点？

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

这是否完全忽略了延迟加载的要点？

JSF中。

忽略样式，因为这在这里无关紧要。

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

然后它通过将跨度添加到锚点来完成循环：

    $(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();
});
4

2 回答 2

4

您应该设置 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 或命令键时，您不应该在新窗口中打开内容。我更新了小提琴，但基本上在您需要的点击事件中：

 var isCtrlPressed = e.ctrlKey || e.metaKey;
 if (isCtrlPressed == true){
    return;
 }

我知道你说忽略样式，但如果占位符的背景颜色明显不同于页面背景，我更喜欢它。如果一个页面加载缓慢，我可以知道那里会加载一些东西，而不是只是一个空白页面。

这是否完全忽略了延迟加载的要点？

不完全，但在这种情况下有点毫无意义。当正在加载的东西非常复杂（例如，一个巨大的表格）时，通常使用延迟加载，因此会大大增加页面大小，这会使页面的初始呈现在用户点击链接后很长时间.

尽管 youtube 视频的加载速度可能很慢，但它们实际上不应阻止页面的其余部分同时加载和呈现，因此延迟加载视频只会为您带来一点好处，而您需要做很多工作。

我想您应该测量某人查看页面的速度，滚动到底部然后单击播放最后一个视频。如果延迟加载速度更快，因为其他视频 Flash 播放器没有加载，那么它仍然值得。

于 2013-02-25T15:48:13.717 回答
1

此处有以下代码的 jsfiddle 。（播放器没有正确显示，我认为 jsfiddle 不能很好地使用“嵌入方法”。我知道它可以使用 iframe 方法在 jsfiddle 上工作，但你提到你想避免 iframe）。

如前所述，一项重大改进是使用swfobject生成播放器嵌入。使用此方法时，您必须为播放器元素创建一个占位符。单击链接时，占位符将被删除并替换为嵌入。我强烈建议为链接和播放器创建一个父 div。为了防止在生成嵌入时调整元素的大小，您还应该明确设置容器元素的宽度/高度。

我认为这是很好地使用延迟加载。尽管 Flash 播放器在加载时不会阻塞，但它们仍然使用大量资源，我希望最初显示为缩略图集的页面。

标记

<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);

    });
});
于 2013-02-26T02:11:52.307 回答