javascript - 让 Facebook 和 Google+ 按钮同时加载

Question

有没有办法让“喜欢”和“+1”按钮同时加载。如果您在 jsfiddle 上按“运行”，您会发现不仅 Google+ 加载明显早于 Facebook，而且 Google+ 按钮也会在 Facebook 按钮加载后向左猛拉，然后又向右猛拉。

它破坏了网站的美观。人们解决这个问题的方法有哪些？顺便说一句，我意识到

已被弃用 - 此处使用它是为了更轻松地演示问题。

http://jsfiddle.net/Sh7aA/

<div id="fb-root"></div>
    <script>window.fbAsyncInit=function(){FB.init({appId:'128762500483273',status:true,cookie:true,xfbml:true});};(function(){var e=document.createElement('script');e.type='text/javascript';e.src=document.location.protocol+'//connect.facebook.net/en_US/all.js';e.async=true;document.getElementById('fb-root').appendChild(e);}());</script>


<p style="text-align:center">Follow us!</p>
<center>
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

</center>

Answer 1

正如 SimonPlus 所回答的，您可以 Conceal 带有按钮的容器，并在按钮准备就绪时显示它。但我认为需要观察每个按钮的加载，因为不能保证 google plus 的按钮总是会更早加载。

不幸的是，GooglePlus Button API 没有 load 事件，因此它需要监听按钮的 iframe load 事件。 Facebook提供了xfbml.render事件，我们可以监听它。然后我们调用回调，当两个按钮都准备好时，我们可以显示它们的容器。

我创建了demo page以这种方法的例子。我使用 jQuery 异步加载按钮脚本，并在按钮开始创建时订阅加载事件。