Fancybox: Show loading animation while loading iframe content

When using jQuery and fancybox for showing another page inside an iframe I want to show the loading animation while the page inside the iframe is loading. This is possible when using ajax to load content but I want the same thing when using iframe. Is it possible from the api to also get the loading animation while the content in the iframe is loading?

This is the code for showing the iframe in the fancybox:

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

Steve

The reason the loading animation isn't displayed is because there isn't any concept of loading that fancybox is aware of for this kind of content; it simply overlays an iframe at the specified dimensions and once that's complete as far as fancybox is concerned the job is done.

The iframe then proceeds to load the content specified as per normal browser functionality.

I'd imagine the effort you'll have to put in to enable the loader will far outweigh the benefit of having it.

Regardless, the question jQuery .ready in a dynamically inserted iframe should help you on your way; it shows you how to push a callback into the iframe's load event, which you could use to remove the loading spinner after having added it on click?

There are of course further complications in getting actual control of the iframe that fancybox overlays, hopefully the API would aid this but again I'm unsure that it's worth the effort.

You can simply attach backgroung with CSS to layer below, that when iframe will be ready it will overlap your backgroung with spinner

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

This worked for me:

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

        }

I had the same question. Here's how I implemented a solution to the problem after reading Steve's answer.

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();
    });

});

Of course this won't work for external URLs with the X-Frame-Options HTTP header set. For example https://www.google.com.au/.

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

THAT should help :-) It's a modification of the original Fancybox (the latest version, BTW).

Careful! From what I've read from the description, this won't work for cross-domains iFrames.

You can attach a handler to the fancybox iframe's load event and hide the loader.

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

    $.fancybox.showActivity();

Dead.Rabit

There are more answers in this SO post. Unfortunately I cannot find a "real" solution, but other people are replacing the page overlay CSS (#fancybox-overlay) to include a spinner. Then when the iframe'd page eventually loads it's placed over the spinner.

EDIT:

I gave up on using fancybox to handle the loading image and thought I'd share my solution. I added an absolutely positioned loading gif of my own to the page, show it just before calling fancybox and I can capture the iframe loaded event with JQuery to hide the spinner, like so:

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

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

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

if you're not calling fancybox manually like I am, I assume you could just as easily attach this code through a click event, i.e:

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

I've also noticed while playing in the fancybox (v2.0.6) source that it looks like fancybox uses the load event to show/hide the loading animation if autoSize is used with an iFrame, though I haven't tested the theory.

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();
}

Fancybox 2 exists now, and provides this out-of-the-box.

This is solve with 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();
                                });
                            }
                    })

来源：https://stackoverflow.com/questions/3666468/fancybox-show-loading-animation-while-loading-iframe-content

标签

jquery

iframe

fancybox