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

我使用jQuery colorbox加载登录表单（通过ajax）。然而，这个小盒子会出现几秒钟，然后它会消失在我想要加载的实际内容中。因此，在观察了网站上的几个之后，我有点确定这个小盒子应该是一个预加载的盒子。有没有什么方法可以完全禁用此框的显示

我曾经尝试过一些愚蠢的事情，比如调整CSS并将

display:none

设置为所有加载项，但都不起作用

我希望避免任何CSS攻击，并通过修改javascript来解决此问题。理想情况下，加载框不会出现，因为我不会使用colorbox加载任何需要很长时间的内容

使用修改后的colorbox javascript和CSS在JSFIDLE上重新创建了问题。ajax内容不会加载到那里，但我想去掉的小盒子仍然显示出来：

---

提前谢谢

我在CSS中更改了以下内容-

#colorbox{border: 1px solid #ebebeb;}    
#cboxContent{background:#fff; overflow:hidden;padding: 20px;}

为此—

#colorbox{border: 0px solid #ebebeb;}
#cboxContent{background:#fff; overflow:hidden;padding: 0px; margin: 0px;}

该框将隐藏，直到它展开以显示内容。我不确定这是否会对你的整体风格有害。您应该能够操纵窗体的边距，以便在其周围获得空白

---

几天前我在与ColorBox合作，所以我相信我对这个话题很熟悉。您是否考虑使用内置回调？ 特别是

onOpen

和

onComplete

如果我们使用Jay提到的填充解决方案，您可以在

onOpen

中将填充设置为

0

，并在

onComplete

中将其设置回所需值

---

这似乎是一个干净的解决方案。

正如@op1ekun所说的

ColorBox

有两个事件在您的情况下非常有用

onOpen

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

onComplete

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

它似乎只是使用

display:none

或

$（“#colorbox”）隐藏lightbox。hide（）

不起作用。因此，我使用了

opacity

在加载内容时隐藏灯箱。我用你的叉子建立了一个JSFIDLE，在实际操作中演示了这一点。以下是已使用的代码：

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

• 参考文献：

我和

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

但当我使用

转换时，它会变成黑色淡入，然后打开
颜色框
，“淡入”

颜色框的属性

现在我在

jquery.colorbox.js

注释或删除

colorboxjs

文件中的以下代码

                /*var initialWidth = setSize(settings.get('initialWidth'), 'x');
                var initialHeight = setSize(settings.get('initialHeight'), 'y');
                var maxWidth = settings.get('maxWidth');
                var maxHeight = settings.get('maxHeight');

                settings.w = (maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth;
                settings.h = (maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight;

                $loaded.css({width:'', height:settings.h});
                */


                /*$loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div,"LoadingGraphic")[0]]);  */                                                                

                 $slideshow = $tag('button', "Slideshow")/*,
                 $loadingOverlay*/

                 /*  clearTimeout(loadingTimer);
                 $loadingOverlay.hide();*/

                 /* loadingTimer = setTimeout(function () {
                 $loadingOverlay.show();
                  }, 100);*/

并更改以下代码

             overlay.css({
                    opacity: opacity === opacity ? opacity : '',
                    cursor: settings.get('overlayClose') ? 'pointer' : '',
                    visibility: 'visible'
              }).show(500);

对,

---

现在它工作得很顺利。

我会用显示隐藏颜色框：无！重要信息，然后查看ajax加载完成时是否有事件，然后将颜色框设置为显示：block@PedroEstrada不过，这听起来像是一个快速破解，需要使用javascript进行适当修复我不会继续使用

display:none

，因为它会降低页面加载速度。。不幸的是，加载的实际内容也没有填充。我希望以某种方式消除完全通过javascript显示小框（加载框？）的需要，这样CSS就不需要太多调整。谢谢：）加载框已展开以显示内容，因此您需要从我所做的更改开始。我对实际的内容容器进行了更改，在本例中为#cboxError，使用边距对其进行了一些填充。我想你只需要增加利润就可以了#cboxLoadedContent@Michelle-你和杰伊都是对的。“加载框”是显示内容的实际容器。插件作者巧妙地使用它在加载过程中显示一个进行中的活动指示器，使用Ajax可以足够慢，足以保证发布一个指示器。除了分叉插件并修改它之外，我不知道有什么简单的方法可以改变这种行为。IMHO使用内置事件比css破解或分叉库并更改库js代码要好得多。非常感谢Arash！这正是我想要的。display:none对我来说效果更好，使用不透明性：0使它跳过了除第一次加载之外的所有调用中的转换效果。

             setTimeout(function(){     
                 $overlay.css({
                       opacity: opacity === opacity ? opacity : '',
                       cursor: settings.get('overlayClose') ? 'pointer' : '',
                       visibility: 'visible'
                  }).fadeIn(500);
      }, 600);