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 がロードされると data-attribute を追加します。そのため、読み込み状態をターゲットにするために、スピナー 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 のいくつかのスタイルを強制する必要がある場合がありますが、それで始める必要があります。

1 つの小さな注意点は、これは属性セレクターをサポートするブラウザーでのみ機能することですが、唯一の「主要な」ブラウザーは、現時点でほとんどの人がサポートを中止した IE7 です。

于 2013-09-04T15:23:10.573 に答える