JQuery colorbox: как я могу предотвратить появление маленького окна индикатора загрузки до того, как будет отображаться основной цветной контент?

Я использую jQuery colorbox для загрузки формы входа (через ajax). Однако эта маленькая маленькая коробка появляется на несколько секунд, затем она исчезает в фактическом содержимом, которое я хочу загрузить. Поэтому, наблюдая несколько примеров colorbox на веб-сайте, я несколько уверен, что маленькая коробка должна быть коробкой предварительной загрузки. Есть ли способ отключить этот ящик от полного появления?

Я пробовал глупые вещи, такие как настройка CSS и установка display: none для всех загружаемых элементов, но это не работает.

Я хочу избежать хаков CSS и решить эту проблему, изменив javascript. В идеале, какой-то способ для окна загрузки никогда не появляться, поскольку я не буду использовать colorbox для чего-либо, что требуется много времени для загрузки.

Воссоздал проблему на jsfiddle, используя измененный javascript и CSS. Содержимое ajax не будет загружаться там, но появляется маленькая коробка, которую я хочу избавиться. http://jsfiddle.net/hPEXf/

Спасибо заранее!

Ответ 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);
        }
    });
});

Refrence: ColorBox - лайтбокс jQuery События/обратные вызовы

Ответ 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/

Ответ 3

Я работал с ColorBox несколько дней назад, поэтому считаю, что я достаточно свежую в этой теме. Считаете ли вы использование встроенных обратных вызовов?

В частности onOpen и onComplete?

Если мы пойдем с дополнением, упомянутым Jay, вы можете установить дополнение на 0 в onOpen и вернуть его в нужное значение в onComplete.

Кажется, это чистое решение.

Ответ 4

Я работал с

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

Но он превращается в черное fade, затем откройте color-box, когда я работаю с transition:"fade" свойствами colorbox.

Теперь я меняю свой код на 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);

и теперь он работает плавно.