延期加載Facebook Like按鈕腳本

谷歌pagespeed抱怨我的Facebook像按鈕腳本。我如何推遲劇本？延期加載Facebook Like按鈕腳本

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

下面是我使用的代碼我將它加載到頁面頁腳的.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>

來源

2013-03-11 RegEdit

[Socialite.js]（http://socialitejs.com/）是一個偉大的圖書館，使得這非常容易做到這一點。 – Nathaniel 2013-03-11 23:21:55

使用setTimeout的路！

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

你可以扔在另一個「線」，以異步加載或推遲它

來源

2013-03-13 05:55:17 ghost

這太神奇了。 20點的谷歌頁面速度洞察力獲得了這麼小的調整！謝謝鬼！ – bluantinoo 2015-06-16 15:24:12

setTimeout的作品，但它不是真正的延遲，因爲如果頁面設定的時間後完成加載（在這種情況下3秒）類似的按鈕將在頁面完成加載之前加載。

我把類似按鈕的javscript代碼我自己的函數內嵌套它

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

裏面然後我將它在身體標記在網頁加載運行：

<body onload="FbButtonLoad();">

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

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

來源

2014-10-17 13:31:41 yoshi

最好將'FbButtonLoad（）;'放入'$（window）.load（）'而不是'onload'來將Javascript和HTML分開。 – Raptor 2015-07-30 06:03:45

另一個稍微不完美的soluti on（僅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") 
);

來源

2017-03-04 16:05:30

延期加載Facebook Like按鈕腳本

回答

相關問題