在facebook之类的盒子完全加载之前显示加载消息

Question

显示加载图标或消息直到加载Facebook就像页面上的框一样简单的方法。

并在页面上完全加载喜欢的框后隐藏消息/图标。

捕捉：

码：

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=488390501239538";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function TakePreview()
{
    jQuery('#loadingmsg').show();
    location.href = location.href;
}

<div id="previewfanbox">

  <strong>Fanbox Widget Preview</strong><br>
  <p id="loadingmsg" style="display:none;">Loading Like Box, please wait...</p>

  <div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true">
  </div>

</div>

    <input name="takepreview" id="takepreview" class="button" type="button" value="Refresh Preview" onclick="return TakePreview();"><br>

因此，请向我建议一种简单的方法或任何其他方法来实现这一目标。谢谢队友！

Answer 1

我已经用纯CSS进行了设置！

使用HTML5顶框时，一旦顶框被加载，Facebook就会添加数据属性。因此，要针对加载状态，我向容器添加了微调器GIF，然后使用属性选择器将其删除：

.fb-like-box {
    background-image: url(../img/loading_icon.gif);
    background-position: center;
    background-repeat: no-repeat;
}
.fb-like-box[fb-xfbml-state="rendered"] {
    background-image: none;
}

根据您的实现，您可能需要/想要在盒子加载时在加载状态上强加一个高度，并在容器div上强加一些样式，但这应该可以帮助您入门。

一个较小的警告是，这仅在支持属性选择器的浏览器中有效，但是唯一的“主要”是IE7，大多数人目前已放弃对IE7的支持。