社交网站facebook_本地延迟加载Facebook社交插件

社交网站facebook

tl;dr: Add data-lazy="true" to your Facebook social plugins that are below the fold and reap the benefits.

tl; dr：将data-lazy="true"到首屏以下的Facebook社交插件中并获得好处。

In code:

在代码中：

// before
<div 
  class="fb-like" 
  data-href="https://phpied.com"></div>
// after
<div 
  class="fb-like" 
  data-href="https://phpied.com" 
  data-lazy="true"></div>

The following 18 seconds video demonstrates the difference. Where currently your visitors load Facebook iframe content even if it's way down the page, after you implement lazy-loading, they'll only load the iframes if there's a chance of ever seeing them. Look for the like.php request and its dependencies.

以下18秒的视频演示了两者的区别。即使您的访问者当前位于页面的下方，他们当前仍在其中加载Facebook iframe内容，在您实现延迟加载后，只有在有机会看到iframe时，他们才会加载iframe。查找like.php请求及其依赖项。

演示地址

这些插件如何工作？(How these plugins work?)

Facebook's social plugins are pieces of Facebook content you can embed into your pages. Like buttons, share buttons, comments, embedded videos, posts and photos and so on.

Facebook的社交插件是您可以嵌入页面的Facebook内容。像按钮，共享按钮，评论，嵌入式视频，帖子和照片等。

The plugins are iframes that point to e.g. facebook.com/plugins/like.php, facebook.com/plugins/comments.php and so on. Some plugins allow you to create the iframes youself, where others do not. And in general it's better not to. Why? Because content can vary based on language and other factors and by creating the iframe yourself you risk the content being cut off.

该插件是I帧那点如facebook.com/plugins/like.php ， facebook.com/plugins/comments.php等。有些插件允许您自己创建iframe，而其他插件则不允许。一般来说，最好不要这样做。为什么？由于内容可能会因语言和其他因素而异，并且您自己创建iframe时，您可能会面临内容被切断的风险。

So who writes the iframes then? The FB JSSDK. You load the SDK (asynchronously, of course) and sprinkle divs where you want the plugins to appear. The SDK writes and resizes the iframes as required.

那么谁来编写iframe呢？ FB JSSDK 。您可以加载SDK(当然是异步地)，并在希望插件出现的位置撒上divs 。 SDK会根据需要写入并调整iframe的大小。

什么是新的？ (What's new?)

Browsers now support native lazy-loading of iframes.

浏览器现在支持iframe的本机延迟加载。

Facebook now supports native lazy-loading of all social plugins.

Facebook现在支持所有社交插件的本地延迟加载。

All you have to do is add the data-lazy="true" attribute to your plugin div elements.

您要做的就是将data-lazy="true"属性添加到插件div元素中。

为什么只折下 (Why only below the fold)

Quick answer: otherwise your visitors may see some content shift.

快速解答：否则您的访客可能会看到一些内容变化。

Long answer: in order to resize the plugins in the best possible way, based on content, the FB JSSDK initially creates the plugin with visibility: hidden and with a size of 1000x1000 pixels. The iframe itself is inside a 0x0 container. After the iframe loads, it informs the SDK of its size and the SDK resizes the iframe and makes it visible.

长答案：为了根据内容尽可能最佳地调整插件的大小，FB JSSDK最初创建的插件具有visibility: hidden且大小为1000x1000像素。 iframe本身位于0x0容器内。加载iframe后，它会通知SDK其大小，然后SDK会调整iframe的大小并使其可见。

In this case visibility: hidden prevents native lazy-loading in Chrome. Reason: analytics should not lazy-load even when the developer sets iframe loading="lazy". This is a questionable decision, but that's how it works for now.

在这种情况下， visibility: hidden可防止Chrome中的本机延迟加载。原因：即使开发人员设置iframe loading="lazy"分析也不应延迟加载。这是一个值得商decision的决定，但目前是这样的。

So to support native lazy-loading as currently implemented, the FB JSSDK creates a visible iframe inside a 1x1 container (turns out 0x0 container also kills native lazy-loading in Chrome). So if the content is above the fold a 1000x1000 iframe inside 1x1 container may cause some visible content shift or overlap other content even if not visible outside 1x1.

因此，为了支持当前实施的本机延迟加载，FB JSSDK在1x1容器内创建了一个可见的iframe(结果是0x0容器也杀死了Chrome中的本机延迟加载)。因此，如果内容超出折痕，那么即使在1x1外部不可见，在1x1容器内的1000x1000 iframe也可能会导致可见内容移动或与其他内容重叠。

If your plugin is only visible below the fold (most often), Chrome's aggressive (or "safe" is the right word?) loading gives plenty of time for the loading and resizing to take place.

如果您的插件仅在首屏以下才可见(最常见)，则Chrome的激进式(或“安全”一词正确吗？)加载为加载和调整大小提供了足够的时间。

为什么我在随机博客上阅读此书？ (Why am I reading this on a random blog?)

This should be on developers.facebook.com, no? Right. However two weeks ago was my last day at Facebook. The Sunday prior my last Monday I debugged with the help of Chrome folks Addy and Dominic and managed to send the diff on Sunday, get it approved Monday, land (thanks Brad!) and barely had time to update the docs. No time for official announcement.

这应该在developers.facebook.com上，对吗？对。但是两周前是我在Facebook的最后一天。在上个星期一的前一个星期日，我在Chrome员工Addy和Dominic的帮助下进行了调试，并设法在星期天发送了差异文件，并在星期一获得了批准，登陆(感谢Brad ！)，几乎没有时间来更新文档。没有时间正式宣布。

使网络更快 (Make the web faster)

Your turn! Go to your plugin implementations and add data-lazy="true" for all plugins below the fold. Comments, embeds, like/share buttons at the end of an article and so on.

轮到你！转到您的插件实现，并为折叠以下的所有插件添加data-lazy="true" 。文章末尾的评论，嵌入，点赞/分享按钮等等。

Your users will love you for it! Battery lives and data allowances will be saved. The web will be less congested.

您的用户会为此而爱上您！电池寿命和数据余量将被保存。网络将不那么拥挤。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息