1

任何显示加载图标或消息的简单方法，直到在页面上加载 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>

所以，请给我一个简单的方法或任何其他方法来实现这一点。谢谢小伙伴们！

4

2 回答 2

5

我已经用纯 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 上的某些样式，但这应该可以帮助您开始。

一个小警告是，这仅适用于支持属性选择器的浏览器，但唯一的“主要”是 IE7，目前大多数人已经放弃了对它的支持。

于 2013-09-04T15:23:10.573 回答
0

您应该在 HTML 中手动将一个属性fb-xfbml-state="none"添加到您的类中以手动添加。fb-like-boxfb-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

于 2020-07-28T08:05:51.377 回答