推遲加載Facebook Like Button Script

Question

Google pagespeed正在抱怨我的facebook就像按鈕腳本一樣。 我怎樣才能推遲腳本？

在初始頁面加載期間解析45KiB的JavaScript。 推遲解析JavaScript以減少頁面呈現的阻塞。 http ://static.ak.facebook.com/.../xd_arbiter.php？...（內聯JavaScript的21KiB） https://s-static.ak.facebook.com/.../xd_arbiter.php ？...（內聯JavaScript的21KiB） http://www.facebook.com/.../like.php ？...（內聯JavaScript的3KiB）

這是我正在使用的代碼，我將它加載到頁面頁腳的.js文件中。

(function(d,s,id){
        var js,fjs = d.getElementsByTagName(s)[0];
        if(d.getElementById(id)){return;}
        js=d.createElement(s);
        js.id=id;
        js.async=true;
        js.defer=true;//THIS DOES NOT APPEAR TO SATISFY PAGESPEED
        js.src="//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js,fjs);
    }
    (document, "script", "facebook-jssdk")
);

結果在以下腳本標記中（通過Chrome的檢查器）：

    <script 
    id="facebook-jssdk" 
    async="" 
    defer="" 
    src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>

Answer 1

使用setTimeout luke！

setTimeout( function () {
   (function(d,s,id){
         // load js
         ...
      }
      (document, "script", "facebook-jssdk")
   );
}, 3000);

您可以將負載放在另一個“線程”中以異步或延遲它

Answer 2

setTimeout工作但它不是真正的延遲，因為如果頁面在設置的時間之后完成加載（在這種情況下為3秒），則在頁面加載完成之前將加載like按鈕。

我把like按鈕的javscript代碼放在我自己的函數中並嵌入到它里面

<script>
    function FbButtonLoad(){
      (function(d,s,id){
         // load js
         ...
      }
      (document, "script", "facebook-jssdk")
   );
}
</script>

然后我在body標簽中設置它以在頁面加載時運行：

<body onload="FbButtonLoad();">

該按鈕出現在我離開容器的頁面上：

<div id="fb-root"></div>
<div class="fb-like" data-send="true" data-width="350" data-show-faces="true"></div>

Answer 3

另一個稍微不完美的解決方案（僅限HTML5）將在DOMContentLoaded上加載庫。

document.addEventListener('DOMContentLoaded', 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/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js,fjs);
    }
    (document, "script", "facebook-jssdk")
);

推遲加載Facebook Like Button Script

問題描述

3 個解決方案

解決方案1
8 已采納 2013-03-13 05:55:17

解決方案2
3 2014-10-17 13:31:41

解決方案3
0 2017-03-04 16:05:30

推遲加載Facebook Like Button Script

問題描述

3 個解決方案

解決方案1 8 已采納 2013-03-13 05:55:17

解決方案2 3 2014-10-17 13:31:41

解決方案3 0 2017-03-04 16:05:30

解決方案1
8 已采納 2013-03-13 05:55:17

解決方案2
3 2014-10-17 13:31:41

解決方案3
0 2017-03-04 16:05:30