Jquery 添加Facebook SDK后的加载时间更长

我正在为我的网站添加Facebook社交按钮。您可以查看

对于Facebook API，我是一个初学者，但是在页脚添加代码后，网站的加载时间要长得多

我通过谷歌做了一些研究，但没有找到任何好的解决方案。我曾尝试添加开源jQuery社交插件，但并没有达到我想要的效果

我希望能够使用默认的类似Facebook/共享按钮（当前位于页脚上）

例如，我用jQuery添加的当前代码有没有办法缩短加载时间？或者有没有其他方法可以让我保留默认的类似Facebook/共享按钮而不影响加载时间

以下是我在

标记后添加的当前JavaScript代码：

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

window.fbAsyninit=函数（）{
FB.init({
appId:'您的应用程序id'，
xfbml：是的，
版本：“v2.3”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

以下是页脚处的HTML代码：

<li><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>

---

提前谢谢

好吧，既然我们解决了这个问题，我们将facebook加载移动到页面加载之后，如下所示：

$(window).load( function(){ 
    (function(d, s, id){ 
         var js, fjs = d.getElementsByTagName(s)[0]; 
         if (d.getElementById(id)) {return;} 
         js = d.createElement(s); 
         js.id = id; 
         js.onload = function() { fbAsyncInit(); }
         js.src = "//connect.facebook.net/en_US/sdk.js"; 
         fjs.parentNode.insertBefore(js, fjs); 
     }(document, 'script', 'facebook-jssdk')); 
});

---

我所做的唯一更改是直接向脚本标签添加一个onload，该标签在脚本加载时触发，因为它在主体加载后加载，这会触发facebook的api基本上像正常一样启动。

您可以通过将

sdk

url更改为：

js.src = "//connect.facebook.net/en_US/sdk.js?xfbml=false"

---

如本文所述，这会将有效负载大小从

~200kb

减小到

~60kb

将其添加到body标签的末尾，并应加载。否则，您可以将该代码的第二部分放在onload块中，如

$（window）.load（function（）{//FACEBOOK STUFF HERE}）

在主体标记的顶部插入脚本节点，并使页面等待facebook的sdk加载。我现在将其添加到主体标记的末尾，但加载时间仍然很长。关于onload块，您的意思是这样的：

$（window）.load（function（）{（function（d，s，id）{var js，fjs=d.getElementsByTagName（s）[0]；if（d.getElementById（id））{return；}js=d.createElement（s）；js.id=id；js.src=“//connect.facebook.net/en_US/sdk.js”；fjs.parentNode.insertBefore（js，fjs）；}（文档'script'，'facebook jssdk'）；}）是的。试试看。它可能会在等待加载时卡住。这样facebook的显示时间会更长，但页面应该加载。更新后，javascript代码位于body标记的末尾，带有一个onload块，如您所述，但目前，该代码中根本没有显示按钮，你知道我在这里可能做错了什么吗？也许facebook也在等待已经通过的加载。在js节内，在带有
js.src的行之前。。。执行以下操作：
js.onload=function（）{fbAsyninit（）；}