添加 Facebook SDK 后加载时间更长

Noh*_*anJ 2 html jquery facebook-javascript-sdk

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

我是 Facebook API 的初学者,但是在页脚中添加代码后,网站的加载时间要长得多。

我通过谷歌做了一些研究,但没有找到任何好的解决方案。我曾尝试添加开源 jQuery 社交插件,但这并不如我所愿。

我希望能够使用默认的 Facebook 点赞/分享按钮(当前位于页脚)。

例如,有什么方法可以减少我使用 jQuery 添加的当前代码的加载时间?或者有没有其他方法可以让我在不影响加载时间的情况下保留默认的 Facebook 点赞/分享按钮?

这是我在<body>标签后添加的当前 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>
Run Code Online (Sandbox Code Playgroud)

这是页脚处的 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>
Run Code Online (Sandbox Code Playgroud)

提前致谢!

Mil*_*ond 5

好的,既然我们解决了它,我们将 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')); 
});
Run Code Online (Sandbox Code Playgroud)

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