当我访问我的页面时，我的分享按钮不会立即出现，当它出现时我们看到页面正在调整答案

【问题标题】：When I access my page, my share button dont appears immediately, and when it appears we saw the page adjusting当我访问我的页面时，我的分享按钮不会立即出现，当它出现时我们看到页面正在调整
【发布时间】：2018-05-30 11:22:38
【问题描述】：

我有一个 div #content1，其中有一些文章，我想在左边显示文章的图像，然后在右边显示新闻的内容......而且我已经可以正常工作了。

但是我也有一个 facebook 分享按钮，并且发生了一些奇怪的事情，当我访问我的页面“localhost/project/index.php”时，我的页面没有分享按钮，而且我的页面看起来有点无格式，过了一会儿，我的分享按钮出现了，页面结构调整了。

这会造成一些不好的印象，因为当分享按钮出现时，我们看到页面组织结构。

有人已经遇到过这样的问题，可以帮我解决这个问题吗？？

这是我的代码：http://jsfiddle.net/J9bAd/3/

/******* HTML ********/

<div id="content1">
            <h1>News</h1>
<article class="news">
             <div class="image_container">
                <img class="img_principal" src="../image3.jpg"/> 
             </div>
             <h2><a href="#" >Title</a><br /></h2>
             <span>Date</span>
             <p> This is my Paragraph... <a  href="#">Read more....</a> </p>
             <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
         <div id="separator"></div>
  </article>

 <article class="news">
             <div class="image_container">
                 <img  src="../image3.jpg"/> 
             </div>
             <h2><a href="#" >Title</a><br /></h2>
             <span>Date</span>
             <p> This is my Paragraph... <a  href="#">Read more....</a> </p>
             <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
         <div id="separator"></div>
  </article>
</div>

/******* CSS *****/

#content1
{
    float:left;
    width:870px;
    background:yellow;
}

#content1 h1
{
    font-size:23px;
    font-weight:100;
    margin-bottom:10px;
}

.news
{
    height:auto; 
    position:relative;
    margin-bottom:10px;
}


.image_container 
{
   width: 160px;
   height: 165px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:20px; 
   border:3px solid #f3f3f3;
   margin-top:4px;  
}

.news h2 a
{
    font-size:21px;  
    color:#3B5998; 
    text-decoration:none;
    margin-left:0;
    font-weight:100;
}


.news p
{

    font-size: 18px;  
    text-align:justify; 
    margin-top:5px;
    margin-bottom:5px;
    line-height:25px;
    word-spacing:-2px;
}    

.fb-share-button
{
    text-decoration:none;
}

#separator
{
    width:870px;
    margin:14px auto 10px auto;
    height:1px;
    background: #f3f3f3;
}

【问题讨论】：

查看this 链接，了解如何不让社交媒体插件拖慢您的网站速度。
感谢您的回答，但我正在阅读您给我的帖子中的所有答案，但是，没有答案，与我的分享按钮一起使用，我的意思是它有效，但加载时间它的icual！

标签： jquery html facebook css

【解决方案1】：

问题是按钮在页面加载后异步加载。可能的解决方案是为其预留固定大小的容器。

所以页面将包含这个固定大小的容器，然后按钮将被加载到容器中。

【讨论】：