很多XFBML Facebook Like按钮很慢？

Question

见http://running.ph/

它只是挂起铬一段时间,而所有按钮加载.我已经阅读过使用IFrame避免这种情况,但我真的想使用XFBML JS来获得所有额外的功能,比如跟踪喜欢,评论和发送按钮.

有人有解决方案吗？我敢肯定,我不是唯一一个拥有10+ Like按钮的网站.

Answer 1

啊我通过检查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>
<script src="http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js"></script>

3.)jQuery代码解析在scrollin事件上的XFBML(从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.)将XFBML标记包装在名为"share-widget"的类中

<span class="share-widget"><fb:like></fb:like></span>

瞧!没有更多的XFBML减慢你的页面.当然,这只会在你的页面上有很多XFBML标签时有所帮助.大多数博客可能有哪些.

谢谢AOL!

使用jQuery查看AOL的SlideShare演示文稿:http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise,他们在此讨论这个以及他们使用的其他优化.