Question

嘿伙计们，我试图在灯箱（Facebox）中显示实际内容之前显示动画GIF 2秒钟。如何实现这一目标？

Facebox模块在表单提交后被触发，到目前为止我有这个代码：

<script type="text/javascript">

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

</script>

加载器的放置方式如下：

<div id="info" style="display:none;">
    The content...

<div id="loader"><img src="http://notifly.se/notifly/images/loader.gif"></div></div>

感谢名单!!!

Answer 1

尝试使用以下

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

Answer 2

我会编写以下函数。

 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（）

Answer 3

在Facebox文档中找到了解决此问题的方法。

你需要包装你的代码：

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

现在所有jQuery都在Facebox中运行。

在实际的html内容出现在Lightbox / Facebox之前显示动画“加载”gif

3 个答案: