6

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"
});
1
  • I've tried to do this as well. I've noticed nothing gets displayed until the entire iframe finished loading completely. This does NOT happen with normal pages. If you insert pages that normally have a loading bar, these don't show up until loading is complete; rendering this bar useless.
    – WhyNotHugo
    Oct 7, 2010 at 1:11

11 Answers 11

14

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;
}
2
  • Thanks! For it to work in IE6 I had to add it to #fancybox-content instead of #fancybox-outer. Oct 12, 2011 at 9:52
  • I like solutions like this. Clean, simple, and smart. Man, you are genious :) Oct 13, 2012 at 22:29
9

This worked for me:

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

        }
0
5

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/.

1

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.

1

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.

1

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

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

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

0
0

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

0

FancyBox provides this out-of-the-box. When you click a button or link to open the iframe,Fancybox will append a div#fancybox_loading to the body, and remove the div once iframe fully loaded. You just need to make sure the div#fancybox-loading is 'display:block'.

image shows the div#fancybox-loading

0

no-javascript, react ready solution support for every browser (html 1.0)

#iframe{
    background:#ffffff url("path/to/your/gif") no-repeat 50% 50% ;
}

Another approach with same support but no extra request:

#iframe{
    background:#ffffff url("data:image/gif;base64,yout-base-64-code") no-repeat 50% 50% ;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.