保留空白，而隐藏的div正在加载 [英] Reserve white space while hidden div is loading

问题描述

在下面的代码中，div是隐藏的，直到它从第三方服务器确定，然后通过jquery呈现。目的是创造一个平稳加载的印象。问题是，这个div下面的段落在div加载后被压下，这违背了伎俩的目的。解决问题的最佳方法是什么？

In the code below, a div is hidden until it gets OK from a 3rd-party server, and then it's rendered via jquery. The purpose is to create an impression of smooth loading. The problem is that the paragraph below this div is pushed down after the div is loaded, which defeats the purpose of the trick. What's the best way to fix that?

http：/ /jsfiddle.net/Sh7aA/7/

<div id="fb-root"></div>
<p style="text-align:center">Follow us!</p>
<center style="display: none;" id="social">
    <div class="g-plusone" data-size="medium"></div>
    <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>

<p style="text-align:center">Test paragraph of text<br>
Paragarph continued</p>

推荐答案

给元素一个大小， 0，因此内容不可见。

Give the element a size, and set it's opacity to zero so the content is invisible

#social {opacity: 0; height: 25px; width: 100%; position: relative;}

然后对内容进行动画处理

Then animate in the content

$('#social').animate({opacity : 1}, 1000);

FIDDLE

这篇关于保留空白，而隐藏的div正在加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！