Fancybox: Show loading animation while loading iframe content

Question

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

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

Answer 2

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.