jquery 添加Facebook SDK后加载时间更长

6ie5vjzr 于 2023-01-30 发布在 jQuery

关注(0)|答案(3)|浏览(122)

我正在为我的网站添加Facebook社交按钮。您可以查看website here.
我是一个初学者，当谈到Facebook的API，然而，在页脚添加代码后，网站的加载时间要高得多。
我在Google上做了一些研究，但没有找到任何好的解决方案。我试着添加开源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>

下面是页脚的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>

先谢了！

jquery

来源：https://stackoverflow.com/questions/31415177/higher-load-time-after-adding-facebook-sdk

3条答案

按热度按时间

0dxa2lsx1#

好吧，既然我们解决了这个问题，我们就把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')); 
});

我做的唯一改变是直接在script标签中添加了一个onload，它在脚本加载时触发，因为脚本加载在body加载之后，body加载触发facebook的API启动，基本上和正常情况一样。

赞(0）回复(0）举报 2023-01-30

lnlaulya2#

您可以通过将sdk url更改为以下内容来进一步改进已接受的答案：

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

如此处所述;https://developers.facebook.com/docs/javascript/advanced-setup/，这会将有效负载大小从~200kb减少到~60kb

赞(0）回复(0）举报 2023-01-30

lvjbypge3#

这是一个老职位，但我猜这是最干净的解决方案：

<script>
$(window).on('load', function() {
  $('body').prepend('<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=false&version=v15.0&appId={appID}"><\/script>');
});
</script>

或者，如果在页面加载后立即显示Facebook元素并不重要，您可以在第一次滚动事件后加载它：

<script>
$(window).on('load', function() {
  $(window).one('scroll', function() {
    $('body').prepend('<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=false&version=v15.0&appId={appId}"><\/script>');
  });
});
</script>

这将我的GTMetrix性能结果从75%提高到95%：）

赞(0）回复(0）举报 2023-01-30

我来回答

jquery 添加Facebook SDK后加载时间更长

3条答案

相关问题

热门标签

最新问答