0

http://screencast.com/t/qDxr1p7bFp

社交按钮跳来跳去，直到满载。

此影片剪辑显示了社交按钮在加载时的跳跃行为。这发生在最新版本的 Chrome、Firefox 和 IE 上。通过 bootstrap-sass gem 使用 Twitter 引导 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>
4

1 回答 1

0

尝试将它们隐藏在 CSS ( .social-buttons { opacity: 0; }) 中，并添加以下内容：

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

它将等到所有元素都加载并再次显示社交按钮。display: none;您也可以尝试在 CSS 和jQuery 中摆弄show()，尽管第二种方式可能会导致您的页面布局在执行该函数后发生变化。

于 2013-04-15T01:06:31.653 回答