![](/img/trans.png)
[英]How to execute script after a user clicks Like on a Facebook Like button?
[英]Defer loading of Facebook Like Button Script
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>
使用setTimeout luke!
setTimeout( function () {
(function(d,s,id){
// load js
...
}
(document, "script", "facebook-jssdk")
);
}, 3000);
您可以将负载放在另一个“线程”中以异步或延迟它
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>
另一个稍微不完美的解决方案(仅限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.