Fancybox: показывать загрузку анимации при загрузке содержимого iframe

Question

При использовании jQuery и fancybox для показа другой страницы внутри iframe Я хочу показать анимацию загрузки, пока страница внутри iframe загружается.Это возможно при использовании ajax для загрузки контента, но я хочу того же при использовании iframe.Возможно ли из API получить анимацию загрузки во время загрузки содержимого в iframe?

Это код для отображения iframe в fancybox:

var $fancybox = $("#openPopup").fancybox({
    'type': 'iframe',
    'href': "Test.php"
});

Answer 1

Вы можете просто прикрепить фон с CSS к слою ниже, чтобы, когда iframe будет готов, он перекрывал фон с помощью счетчика

#fancybox-outer{
    background:#fff url("$path to animation/ajax-loader.gif") no-repeat 50% 50% !important;
}

Answer 2

Это сработало для меня:

'onComplete' : function(){
            jQuery.fancybox.showActivity();
            jQuery('#fancybox-frame').load(function(){
                jQuery.fancybox.hideActivity();
            });

        }

Answer 3

У меня был тот же вопрос.Вот как я реализовал решение проблемы после прочтения ответа Стива.

HTML:

<a id="myLink" href="/slow-loading-url">My Link</a>

JavaScript:

$(document).ready(function() {

    $("#myLink").click(function(event) {
        $.fancybox.open(this.href, {type: "iframe"});
        $.fancybox.showLoading();
        $("iframe.fancybox-iframe").load(function() {
            $.fancybox.hideLoading();
        });
        event.preventDefault();
    });

});

Конечно, это не будет работать длявнешние URL с установленным заголовком HTTP X-Frame-Options.Например https://www.google.com.au/.

Answer 4

Есть еще ответы в этом ТАК сообщении.К сожалению, я не могу найти «реальное» решение, но другие люди заменяют CSS наложения страниц (# fancybox-overlay), чтобы включить спиннер.Затем, когда страница iframe в конечном итоге загружается, она помещается поверх спиннера.

РЕДАКТИРОВАТЬ:

Я отказался от использования fancybox для обработки загружаемого изображения и подумалподелюсь своим решением.Я добавил абсолютно позиционную загрузку gif своей собственной страницы, покажу ее перед вызовом fancybox, и я могу захватить загруженное событие iframe с помощью JQuery, чтобы скрыть счетчик, например:

$( "#progressIcon" ).show();

$.fancybox.open( { type: "iframe", minWidth: 990, minHeight: 690, href: URL, title: "Basket" } );

$( "iframe" ).load( function ()
{
    $( "#progressIcon" ).hide();
} );

ifвы не вызываете fancybox вручную, как я, я полагаю, вы могли бы так же легко прикрепить этот код через событие щелчка, например:

$('.fancybox').fancybox();
$('.fancybox').click( /* ... */ );

Я также заметил это во время игры в fancybox (v2.0.6) источник, который выглядит как fancybox, использует событие загрузки, чтобы показать / скрыть загрузочную анимацию, если autoSize используется с iFrame, хотя я не проверял теорию.

if (type === 'iframe' && current.autoSize) {
    F.showLoading();

    F._setDimension();

    F.inner.css('overflow', current.scrolling);

    content.bind({
        onCancel : function() {
            $(this).unbind();

            F._afterZoomOut();
        },
        load : function() {
            F.hideLoading();

            try {
                if (this.contentWindow.document.location) {
                    F.current.height = $(this).contents().find('body').height();
                }
            } catch (e) {
                F.current.autoSize = false;
            }

            F[ F.isOpen ? '_afterZoomIn' : '_beforeShow']();
        }
    }).appendTo(F.inner);

} else {
    F.inner.append(content);
    F._beforeShow();
}

Answer 5

Вы можете прикрепить обработчик к событию загрузки в fancybox iframe и скрыть загрузчик.

$('<a href="url_here"> </a>').fancybox({
        type: 'iframe'
        onComplete: function(){
            $('#fancybox-frame').load(function(){
                $.fancybox.hideActivity();
            });
        }
    }).click();

    $.fancybox.showActivity();

Answer 6

http://panduwana.wordpress.com/2010/05/09/fancybox-iframe-patch/

ЭТО должно помочь :-) Это модификация оригинального Fancybox (последняя версия, кстати).

Осторожно!Из того, что я прочитал из описания, это не будет работать для междоменных iFrames.

Answer 7

Причина, по которой анимация загрузки не отображается, заключается в том, что не существует никакой концепции загрузки, о которой знает fancybox для такого рода контента;он просто накладывает iframe на указанные размеры, и, как только он завершен, fancybox завершает работу.

Затем iframe приступает к загрузке содержимого, указанного в соответствии с обычными функциями браузера.

Я полагаю, что усилия, которые вам придется приложить для включения загрузчика, значительно перевесят его преимущества.

Независимо от этого, вопрос jQuery. Уже вдинамически вставленный iframe должен помочь вам на вашем пути;в нем показано, как вставить обратный вызов в событие загрузки iframe, которое можно использовать для удаления счетчика загрузки после добавления его по щелчку?

Конечно, существуют дополнительные сложности в получении фактического контроля над iframe,оверлеи fancybox, надеюсь, API поможет в этом, но опять же я не уверен, что оно того стоит.

Answer 8

Это решить с помощью z-index

<style>
     #fancybox-loading{z-index:99999;}
</style>


 <script>
                   $.fancybox({
                            'href'          :url,   
                            'width'         : 900,
                            'height'        : 600,
                            'scrolling' : 'auto',
                            'type'              : 'iframe',
                            'titleShow'     : false,
                            'onComplete' : function() {
                                $.fancybox.showActivity();
                                $('#fancybox-frame').load(function() {
                                    $.fancybox.hideActivity();
                                });
                            }
                    })

Answer 9

Fancybox 2 существует сейчас и предоставляет это "из коробки".