jQuery colorbox:如何防止加载指示器小框出现在主色盒内容之前？

Question

我正在使用jQuery colorbox来加载登录表单(通过ajax).但是,这个小小的盒子会显示几秒钟,然后它会淡入我想要加载的实际内容中.因此,在网站上观察了几个彩盒示例之后,我有点确定这个小盒子应该是一个预装盒子.有什么方法可以禁止这个盒子完全出现吗？

我已经尝试过愚蠢的事情,例如调整CSS和设置display: none所有加载项目,但它不起作用.

我想避免任何CSS黑客攻击并通过修改javascript来解决这个问题. 理想情况下,装载盒永远不会出现的某种方式,因为我不会使用colorbox来加载需要很长时间的任何东西.

使用我修改过的colorbox javascript和CSS在jsfiddle上重新创建了问题.ajax内容不会在那里加载,但是我想要摆脱的小盒子仍然出现:http://jsfiddle.net/hPEXf/

提前致谢!

Answer 1

正如@ op1ekun所说,ColorBox有两个对你的情况有用的事件.

onOpen - >在ColorBox开始打开之前触发的回调.

onComplete - >显示加载内容后立即触发的回调.

它似乎只是隐藏灯箱使用display:none或$("#colorbox").hide()不工作.所以我曾经opacity在内容加载时隐藏灯箱.我已经设置了一个jsfiddle,你可以通过你的http://jsfiddle.net/fDd6v/2/来证明这一点.以下是已使用的代码:

$(function(){
    $("#awesome-link").colorbox({
        onOpen: function(){
            $("#colorbox").css("opacity", 0);
        },
        onComplete: function(){
            $("#colorbox").css("opacity", 1);
        }
    });
});

• 参考:ColorBox - 一个jQuery灯箱事件/回调文档