Jumpy Tweet Button & Like Button - скрыть до полной загрузки?

Question

http://screencast.com/t/qDxr1p7bFp

Социальные кнопки прыгать до полной загрузки.

Этот ролик показывает неуклюжие поведение социальных кнопок при их загрузке. Это происходит в Chrome, Firefox и IE, последние сборки. Использование щебетать bootstrap css через самоцветов самоцвета.

Есть ли все равно, чтобы скрыть их, пока они не закончат загрузку?

<div class="social-bar"> 
<div class="container"> 
    <ul class="social-buttons"> 
     <li class="fb-button"> 
      <fb:like send="false" layout="button_count" width="450" show_faces="false"></fb:like> 
     </li> 
     <li class="tw-button"> 
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="adtechkyushu" data-hashtags="adtech9" data-dnt="true">Tweet</a> 
     </li> 
    </ul> 
    </div> 
</div> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js" type="text/javascript"></script> 
<script src="http://connect.facebook.net/en_GB/all.js#xfbml=1"></script> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

Answer 1

Try, чтобы скрыть их в CSS (.social-buttons { opacity: 0; }), и добавить:

$(document).load(function() { 
    $(".social-buttons").css("opacity", "1"); 
}); 

Он будет ждать до тех пор пока все элементы будут загружать и снова отобразить социальные кнопки. Вы также можете попробовать fiddling с display: none; в CSS и show() в jQuery, хотя второй способ может привести к изменению макета страницы после выполнения функции.