javascript - jQuery colorbox：如何防止加载指示器小框出现在主要颜色框内容之前？

Question

我正在使用 jQuery colorbox 加载登录表单（通过 ajax）。然而，这个小盒子会显示几秒钟，然后它会淡入我要加载的实际内容。因此，在观察了网站上的几个颜色框示例后，我有点确定这个小框应该是一个预加载框。有什么办法可以让这个框完全不显示？

我尝试过一些愚蠢的事情，比如调整 CSS 和设置display: none所有加载项，但它不起作用。

我想避免任何 CSS hack 并通过修改 javascript 来解决这个问题。 理想情况下，加载框永远不会出现，因为我不会将颜色框用于任何需要很长时间才能加载的内容。

使用我修改后的颜色框 javascript 和 CSS 在 jsfiddle 上重新创建了问题。ajax 内容不会在那里加载，但我想摆脱的小盒子仍然出现：http: //jsfiddle.net/hPEXf/

提前致谢！

Answer 1

正如@op1ekun 所说ColorBox，有两个事件对您的情况很有用。

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

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

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

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

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

Answer 2

我在 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;}

并且该框被隐藏，直到它展开以显示内容。不过，我不确定这是否会损害您的整体风格。您应该能够操纵表单的边距，以便在其周围留出空白。

http://jsfiddle.net/hPEXf/1/

Answer 3

几天前我在使用 ColorBox，所以我相信我对这个话题很新鲜。您是否考虑过使用内置回调？

具体onOpen和onComplete？

如果我们使用 Jay 提到的填充解决方案，您可以0在 中设置填充onOpen并将其设置回onComplete.

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

Answer 4

我和我一起工作

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

color-box但是当我使用颜色框的transition:"fade"属性时，它会变成黑色淡入淡出然后打开。

现在我改变我的代码jquery.colorbox.js

colorbox js注释或删除文件中的以下代码

                /*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);

到，

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

现在它工作顺利。