javascript - 很多XFBML Facebook Like按钮运行缓慢吗？

参见http://running.ph/

它会在所有按钮加载时将chrome挂一会儿。我已经读过使用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>
<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标签时才有用。大多数博客可能都有。

谢谢美国在线!

请参阅使用jQuery的AOL的SlideShare演示文稿:http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise，他们在其中讨论此功能以及他们使用的其他优化。

关于javascript - 很多XFBML Facebook Like按钮运行缓慢吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6838254/