问题描述
请参阅
它只是挂了一段时间,而所有的按钮加载。我已经阅读使用IFrame避免这一点,但我真的想使用XFBML JS的所有额外的功能,像跟踪喜欢,评论和发送按钮。
我相信我不是唯一一个拥有10+以上按钮的网站。
通过查看Techcrunch / AOL的作用找到答案。
您在用户滚动时加载XFBML。
1)不要在FB.init上解析XFBML或者加载JS SDK
FB.init({
appId:APP_ID,
xfbml:false
});
2。)加载jQuery和jquery.sonar.js - 这包含滚动和浏览自定义事件
< script src =// ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js >< /脚本>
< script src =http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js>< / script>
3。)jQuery代码解析XFBML on scrollin事件(从Techcrunch窃取)
$ ($($){var $ shareWidgets = $('.share-widget');
$ shareWidgets.bind('scrollin',{distance:500},function(){
var $ share = $(this);
if(!$ share.data('initFB' )&& window.FB){
$ share.data('initFB',1);
$ share.unbind('scrollin');
FB.XFBML.parse( $ share [0]);
}
});
});
4)将XFBML标签包装在名为share-widget的类中
< span class =share-widget>< fb:like>< / fb:like>< / span>
瞧瞧!没有更多的dang XFBML减慢你的页面。当你的页面上有很多XFBML标签时,这只能帮助你。哪些大多数博客可能有。
谢谢AOL!
使用jQuery查看AOL的SlideShare演示文稿: a href =http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise =noreferrer> http://www.slideshare.net/daveartz/jquery-in-the- aol-enterprise ,他们谈论他们使用的这个和其他优化。
It just hangs chrome for a while, while all the buttons load. I've read using IFrame avoids this but I really want to use XFBML JS for all the extra functionality you get with it like tracking Likes, comments, and the send button.
Does anyone have a solution to this?I'm sure I'm not the only site with 10+ Like buttons on it.
ah I found the answer by checking what Techcrunch / AOL does.You load the XFBML as the user scrolls.
1.) Don't Parse XFBML on FB.init or the loading of the JS SDK
FB.init({
appId : APP_ID,
xfbml : false
});
2.) Load jQuery and jquery.sonar.js - this contains scroll and scrollout custom events
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js"></script>
3.) jQuery code to parse XFBML on scrollin event (stolen from Techcrunch)
jQuery(document).ready(function($) {
var $shareWidgets = $( '.share-widget' );
$shareWidgets.bind( 'scrollin', { distance: 500 }, function() {
var $share = $( this );
if (!$share.data( 'initFB' ) && window.FB) {
$share.data('initFB', 1);
$share.unbind( 'scrollin' );
FB.XFBML.parse( $share[0] );
}
});
});
4.) wrap your XFBML tags in a class called 'share-widget'
<span class="share-widget"><fb:like></fb:like></span>
and voila! no more dang XFBML slowing down your pages. Ofcourse this only helps when you have a lot of XFBML tags on your page. Which most blogs may have.
Thank you AOL!
See the SlideShare presentation of AOL using jQuery: http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise where they talk about this and other optimizations they use.
这篇关于很多XFBML Facebook Like按钮很慢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!