推迟加载Facebook Like Button Script
[英]Defer loading of Facebook Like Button Script
问题描述
Google pagespeed is complaining about my facebook like button script. 
Google pagespeed正在抱怨我的facebook就像按钮脚本一样。 How can I defer the script? 我怎样才能推迟脚本？
45KiB of JavaScript is parsed during initial page load.
Here's the code I'm using and I'm loading it into a .js file in the footer of my page. 这是我正在使用的代码，我将它加载到页面页脚的.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")
);
Results in the following script tag (via Chrome's inspector): 结果在以下脚本标记中（通过Chrome的检查器）：
<script
id="facebook-jssdk"
async=""
defer=""
src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>
3 个解决方案
解决方案1
8 已采纳 2013-03-13 05:55:17
Use the setTimeout luke! 使用setTimeout luke！
setTimeout( function () {
(function(d,s,id){
// load js
...
}
(document, "script", "facebook-jssdk")
);
}, 3000);
You can throw the load in another 'thread' to async or Defer it 您可以将负载放在另一个“线程”中以异步或延迟它
解决方案2
3 2014-10-17 13:31:41
setTimeout works but it's not real defer, since if the page finished loading after the time set (in this case 3 seconds) the like button will be loaded before the page finished loading. setTimeout工作但它不是真正的延迟，因为如果页面在设置的时间之后完成加载（在这种情况下为3秒），则在页面加载完成之前将加载like按钮。
I put the like button's javscript code inside my own function and nested it inside the 我把like按钮的javscript代码放在我自己的函数中并嵌入到它里面
<script>
function FbButtonLoad(){
(function(d,s,id){
// load js
...
}
(document, "script", "facebook-jssdk")
);
}
</script>
then I set it in the body tag to run on page load: 然后我在body标签中设置它以在页面加载时运行：
<body onload="FbButtonLoad();">
The button appears on the page where I left it's containers: 该按钮出现在我离开容器的页面上：
<div id="fb-root"></div>
<div class="fb-like" data-send="true" data-width="350" data-show-faces="true"></div>
解决方案3
0 2017-03-04 16:05:30
Another slightly less than perfect solution (HTML5 only) would be to load the library on DOMContentLoaded. 另一个稍微不完美的解决方案（仅限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")
);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.