Lightbox / Faceboxに実際のHTMLコンテンツが表示される前に、アニメーション化された「ロード」GIFを表示する

animated-gif facebox jquery
Lightbox / Faceboxに実際のHTMLコンテンツが表示される前に、アニメーション化された「ロード」GIFを表示する

皆さん、私は実際のコンテンツがライトボックス(Facebox)に表示される前に、2秒間アニメーションGIFを表示しようとしています。 どうすればこれを実現できますか?

Faceboxモジュールは、フォームの送信後にトリガーされます。これまでのところ、次のコードがあります。

    $('#submitform').submit(function() {
        $('#loader').show();
        $.post('/file.php', function() {
            $('#loader').hide();
        });
        return false;
    });

ローダーは次のように配置されます。

    The content...

ありがとう!

  0  0


ベストアンサー

以下を使ってみてください

$('#submitform').submit(function() {
        setTimeout(function(){$('#loader').show();},0);
        $.post('/file.php', function() {
            $('#loader').hide();
        });
        return false;
    });

0


次の関数を作成します。

 function showLoadingDialog(){
     $('#loader').show();

     //Second parameter is in Ms
     //setTimeout will delay the function call for the time specified
     setTimeout('showRealContent()', 2000)
 }

 function showContent(){
      $('#loader').hide();
      $('info').show();
 }

次に、イベントからshowLoadingDialog()を呼び出すだけです。

0


Faceboxのドキュメントでこの問題の解決策を見つけました。

コードをラップする必要があります:

$(document).bind('reveal.facebox', function() { *//code here//* }

現在、すべてのjQueryはFacebox内で動作します。

0


タイトルとURLをコピーしました