javascript - 许多 XFBML Facebook Like 按钮很慢？

Question

参见 http://running.ph/

它只是挂起 chrome 一段时间，同时加载所有按钮。我读过使用 IFrame 可以避免这种情况，但我真的想使用 XFBML JS 来获得您获得的所有额外功能，例如跟踪点赞、评论和发送按钮。

有人有办法解决这个问题吗？我敢肯定，我不是唯一一个拥有 10 个以上“赞”按钮的网站。

Answer 1

啊，我通过检查 Techcrunch/AOL 的功能找到了答案。您在用户滚动时加载 XFBML。

1.) 不要在 FB.init 或加载 JS SDK 时解析 XFBML

FB.init({
  appId  : APP_ID,
  xfbml  : false
});

2.) 加载 jQuery 和 jquery.sonar.js - 这包含 scroll 和 scrollout 自定义事件

<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.) 在 scrollin 事件上解析 XFBML 的 jQuery 代码(从 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 标记时才有用。大多数博客可能都有。

谢谢美国在线!

使用 jQuery 查看 AOL 的 SlideShare 演示文稿:http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise他们在那里谈论这个和他们使用的其他优化。