Question

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

它破坏了网站的美学。人们解决这个问题的方法是什么？顺便说一句，我意识到＆lt;中心]，[不推荐使用 - 这里用它来更容易地证明问题。

<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所说，你可以用按钮隐藏容器，并在按钮准备好时显示它。但我认为需要观看每个按钮的加载，因为不保证google plus的按钮总是会提前加载。

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

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

Answer 2

您可以隐藏包含按钮的容器，并在加载后显示它。由于Facebook按钮加载速度较慢，您可以detect when it has loaded然后显示容器。

Answer 3

它不是“漂亮”，但您是否尝试为每个div设置静态宽度？它可以防止按钮周围的抖动。

我见过的其他方法是用图像替换按钮，然后在鼠标悬停在按钮上时运行按钮加载动作。

同时加载Facebook和Google+按钮

3 个答案: