延期加载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按钮脚本

回答

相关问题