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

嘿，伙计们，我正试图在lightbox 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>

---

Thanx

尝试使用以下方法

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

---

我将编写以下函数

 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

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

您需要对代码进行包装：

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

---

现在，所有jQuery都在Facebox中工作。

您的loader div是info div的子项，而info div不显示。把你的加载器div放在一边。对不起，我早该注意到的！lightbox只加载info-div中的内容。如果我将加载程序放在info-div之外，它还会显示在lightbox内部吗？您应该使用CSS控制div的位置，并使加载程序看起来好像“在”内容。尝试将其放在info-div之外，但现在它会在我加载页面后立即显示。您应该设置要显示的样式：无；在这种情况下，代码看起来不错，但不起作用。当我在表单提交上执行onClick和call showloading对话框时，没有显示任何内容。我猜这不起作用，因为loader div位于info div内，当onClick=jQuery.facebox{div:'info'}；时调用info div；。因此，如果我调用showLoadingDialog；Facebox一点也不叫。是的，我会把div分开。