在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 Like Box时，Facebook会在加载Like Box后添加数据属性。因此，为了定位加载状态，我向容器添加了一个微调器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上的某些样式，但是这样可以让您开始。

一个小问题是，这仅适用于browsers that support attribute selectors，但唯一的“主要”是IE7，大多数人此时已经放弃了支持。

Answer 2

您应该手动将一个属性fb-xfbml-state="none"添加到HTML的fb-like-box类中，以手动添加fb-like-box。

    <div 
        class="fb-like-box" 
        fb-xfbml-state="none" 
        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>

现在为加载器编写一些CSS

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

.fb-like-box[fb-xfbml-state="rendered"] {
    background-image: none;
}

由于您尚未提供页面的确切CSS，因此我将使用与我给出的代码完全相同的代码来演示我的代码

笔链接：https://jsfiddle.net/ashuvssut/rLh2cauj/1/（请稍等！这支笔只是具有可以正常工作的代码...但是，这支笔不会渲染那些FB嵌入，因为这些笔网站没有这样做）不支持此功能）

证明：有效：访问https://ashuvssut.github.io/Bless-n-Bliss/events.html