Сделайте так, чтобы кнопки 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, вы можете скрыть контейнер с кнопками и показать его, когда кнопки будут готовы. Но я думаю, что нужно следить за загрузкой каждой кнопки, потому что нет гарантии, что кнопка GooglePlus всегда будет загружаться раньше.

К сожалению, API кнопки GooglePlus не имеет события загрузки, поэтому его нужно прослушивать iframe событие загрузки. Facebook предоставляют xfbml.render событие, и мы можем слушать его. Затем мы вызываем функцию обратного вызова, и когда обе кнопки готовы, мы можем показать их контейнер.

Я создал демо-страницу с примером такого подхода. я использую jQuery для асинхронной загрузки сценариев кнопок и подписки на событие загрузки, когда кнопки начали создавать.

Answer 2

Вы можете скрыть контейнер, содержащий кнопки, и показать его после того, как они оба загрузятся. Поскольку кнопка Facebook загружается медленнее, вы можете определить, когда она была загружена, а затем показать контейнер.

Answer 3

Это не "довольно", но вы пытались установить статическую ширину для каждого из div? Это предотвратит дергание кнопок.

Другие методы, которые я видел, используются для замены кнопок изображениями, а затем запускаются действия загрузки кнопок, когда мышь наводит курсор на кнопки.