Fancybox: Show loading animation when loading iframe content

Question

When using jQuery and fancybox to display another page inside the iframe, I want to show loading animations, while the page inside the iframe is loading. This is possible when using ajax to load content, but I want it to be when using iframe. Is it possible for api to also load animations when loading content in an iframe?

This is the code for displaying iframe in fancybox:

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

Answer 1

The reason that the loading animation is not displayed is because there is no loading concept that fancybox knows for such content; it simply imposes an iframe on the specified sizes, and after completing work with fancybox, the task is executed.

The iframe then proceeds to load the content specified in accordance with the normal functionality of the browser.

I would suggest that the efforts you have to include to enable the bootloader will far outweigh the benefits of having it.

Regardless, the jQuery.ready question in a dynamically inserted iframe should help you on your way; does it show you how to redirect a callback to an iframe load event that you could use to remove the bootloader after adding it on click?

There are, of course, additional complications in getting the actual iframe control that fancybox imposes, I hope the API would help this, but again I'm not sure if it is worth the effort.

Answer 2

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

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

Answer 3

This worked for me:

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

Answer 4

I had the same question. This is how I implemented the 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 will not work for external URLs with a set of X-Frame-Options HTTP headers. For example, https://www.google.com.au/ .

Answer 5

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

THIS should help :-) This is a modification of the original Fancybox (latest version, BTW).

Caution! From what I read from the description, this will not work for cross-domain iFrames.

Answer 6

You can attach a handler to the fancybox iframe 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(); 

Answer 7

This will post more answers. Unfortunately, I cannot find a “real” solution, but other people are replacing CSS overlay CSS (# fancybox-overlay) to enable spinner. Then, when the iframe'd page ultimately loads it on top of the counter.

EDIT:

I refused to use fancybox to process the uploaded image and decided to share my solution. I added an absolutely positioned gif loading to my page, showing it just before the fancybox call, and I can capture the event loaded by the iframe using jQuery to hide the counter, for example:

 $( "#progressIcon" ).show(); $.fancybox.open( { type: "iframe", minWidth: 990, minHeight: 690, href: URL, title: "Basket" } ); $( "iframe" ).load( function () { $( "#progressIcon" ).hide(); } ); 

If you don't call fancybox manually like me, I suppose you could just attach this code through the click event, i.e.

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

I also noticed that while playing in the fancybox (v2.0.6) source, it looks like fancybox uses the load event to show / hide the loading animation if autoSize is used with iFrame, although I have not 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(); } 

Answer 8

Fancybox 2 exists and provides this turnkey option.

Answer 9

This is a solution 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(); }); } })