首先尝试延迟加载（推迟嵌入的YouTube视频的加载） - 我怎样才能更优雅地做到这一点？ [英] First attempt at lazy loading (deferring the load of embedded YouTube videos) - how can I do this more gracefully?

问题描述

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

这是我第一次尝试延迟加载的方法，我认为这是值得问：

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

我怎样才能让它更优美？

延期加载点？

JSFiddle

忽略样式，因为这是无关紧要的。

---

这种方式的工作方式是首先在包含视频ID的页面上放置一个定位点：

 < a href =＃data-video =FzRH3iTQPrkclass =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（'点击加载视频'）; 
 $（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以便人们知道他们是什么将会加载。这可以在页面生成时或JS中的a元素上完成。如果您希望自己的网页适用于禁用Javascript的用户，则必须在元素上。
  var url =http ：//www.youtube.com/watch？v =+ videoId; 
 $（this）.attr（'href'，url）; 
  
你也应该告诉人们如果他们点击标题设置，会发生什么：
  $（this）.attr（'title'，点击播放视频）; 
  
或者通过在 SMH ，这使得它更明显点击图片将播放视频。或者两者兼而有之。 
 
 
当人们按住ctrl或command键时，你也不应该在新窗口中打开东西。我更新了小提琴，但基本上在您需要的点击事件中：
  var isCtrlPressed = e.ctrlKey || e.metaKey; 
 if（isCtrlPressed == true）{
 return; 
} 
  
我知道你说忽略样式，但我更喜欢它，如果占位符背景颜色明显不同于页面的背景。如果一个页面的加载速度很慢，那么我可以说有些东西会加载到那里，而不是仅仅是一页空白。
 
 
这完全错过了延期加载的时间点吗？
 
 
并不完全，但在这种情况下，它有点毫无意义。当被加载的东西非常复杂时（例如大量的表格），通常会使用延迟加载，所以会大大增加页面大小，这会使用户在链接之后初始渲染页面很长时间。
 
 
尽管YouTube视频的加载速度可能会很慢，但它们实际上并不会实际阻止加载和呈现页面的其余部分，因此只会延迟加载视频
 
 
 
我想你应该测量某人可以查看页面的速度，滚动到底部然后点击播放最后的视频。如果延迟加载速度更快，因为其他视频Flash播放器未加载，那么它仍然值得。
 
Yesterday I decided to improve the way my website loads YouTube videos by only embedding them when a user requests them. Sometimes a page could have as many as 30 videos on, and this would take a long time to load.

This is the first time I've attempted a "lazy loading" method of anything, and I figured it would be well worth asking:

What can I do to improve on this?

How can I make it a bit more graceful?

Does this completely miss the point of deferred loading?

JSFiddle.

Ignore the styling as that's irrelevant here.



The way this works is by first placing an anchor on the page containing the video's ID:
<a href="#" data-video="FzRH3iTQPrk" class="youtube-video">
The jQuery behind then loops through every a.youtube-video and creates a transparent span with the video's thumbnail as its background:
$('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"
    })
    ...
It then modifies the styling of the anchor tag (this is done here to prevent affecting browsers with JavaScript disabled):
    $(this).css({
        height:315,
        width:460,
        position:"relative",
        display:"block",
        textAlign:"center",
        color:"#fff",
        fontSize:26
    });
It then finishes up the loop by adding the span to the anchor:
    $(this).text('Click to load video');
    $(this).append(videoBackground);
});
The loading of the embedded YouTube video object occurs on the anchor click:
$('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 finishes up by adding the embed code to the anchor's parent and removing the anchor:
    $(this).parent().append(videoEmbed);
    $(this).hide();
});

解决方案
You should set the href so that people know what they're going to be loading. That can be done on the a element when the page is generated, or in JS. It has to be on the element if you want your page to work for people who have Javascript disabled.
var url = "http://www.youtube.com/watch?v=" + videoId;
$(this).attr('href', url);
You should also tell people what will happen if they click either by setting a title:   
$(this).attr('title', "Click to play video");
Or by creating an overlay like the ones at the SMH which makes it more obvious that clicking on the image will play a video. Or both.

Also you shouldn't break opening things in new window when people hold down ctrl or command key. I updated the fiddle but basically in your click event you need:
 var isCtrlPressed = e.ctrlKey || e.metaKey;
 if (isCtrlPressed == true){
    return;
 } 
I know you said ignore the style, but I prefer it if a placeholder has a background color that is obviously different from the background of the page. If a page is slow loading, I can tell that something is going to load there, rather than it just being a blank bit of page.

  
Does this completely miss the point of deferred loading?
Not entirely but it is slightly pointless in this case. Deferred loading is usually used when the thing that is being loaded is very complex (e.g. a massive table) and so would add greatly to the page size, which would make the initial render of the page be a long time after the user followed the link.

Although the youtube videos may be slow to load, they shouldn't actually block the rest of the page from loading and rendering in the meantime so deferring loading the videos only gives you a small benefit for quite a bit of work.

I guess you should measure how fast someone can view a page, scroll to the bottom and then click to play the last video. If it's faster with the deferred loading, because the other videos flash player isn't loaded then it could still be worth it.

                        
这篇关于首先尝试延迟加载（推迟嵌入的YouTube视频的加载） - 我怎样才能更优雅地做到这一点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！