jQuery Fancybox：在加载 iframe 内容时显示加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3666468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancybox: Show loading animation while loading iframe content
提问by Martin
When using jQuery and fancyboxfor 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?
当使用jQuery和fancybox在iframe中显示另一个页面时，我想在iframe中的页面加载时显示加载动画。这在使用 ajax 加载内容时是可能的，但在使用 iframe 时我想要同样的东西。当 iframe 中的内容正在加载时，是否可以从 api 获取加载动画？
This is the code for showing the iframe in the fancybox:
这是在fancybox中显示iframe的代码：
var $fancybox = $("#openPopup").fancybox({
'type': 'iframe',
'href': "Test.php"
});
采纳答案by 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.
没有显示加载动画的原因是，对于这种内容，fancybox 没有意识到加载动画的任何概念；它只是在指定的尺寸上覆盖一个 iframe，一旦完成，就fancybox 而言，工作就完成了。
The iframe then proceeds to load the content specified as per normal browser functionality.
然后 iframe 继续加载按照正常浏览器功能指定的内容。
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 iframeshould 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?
无论如何，动态插入的 iframe 中的 jQuery .ready问题应该对您有所帮助；它向您展示了如何将回调推送到 iframe 的加载事件中，您可以使用它在单击添加后删除加载微调器？
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.
当然，获得对fancybox 覆盖的iframe 的实际控制还有进一步的复杂性，希望API 会对此有所帮助，但我再次不确定是否值得付出努力。
回答by Roman
You can simply attach backgroung with CSS to layer below, that when iframe will be ready it will overlap your backgroung with spinner
您可以简单地将带有 CSS 的背景附加到下面的图层，当 iframe 准备就绪时，它将与 Spinner 重叠您的背景
#fancybox-outer{
background:#fff url("$path to animation/ajax-loader.gif") no-repeat 50% 50% !important;
}
回答by Ankit Jain
This worked for me:
这对我有用：
'onComplete' : function(){
jQuery.fancybox.showActivity();
jQuery('#fancybox-frame').load(function(){
jQuery.fancybox.hideActivity();
});
}
回答by James Newell
I had the same question. Here's how I implemented a solution to the problem after reading Steve's answer.
我有同样的问题。以下是我在阅读 Steve 的回答后如何实施该问题的解决方案。
HTML:
HTML：
<a id="myLink" href="/slow-loading-url">My Link</a>
JavaScript:
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/.
当然，这不适用于带有 X-Frame-Options HTTP 标头集的外部 URL。例如https://www.google.com.au/。
回答by WhyNotHugo
http://panduwana.wordpress.com/2010/05/09/fancybox-iframe-patch/
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).
这应该会有所帮助:-) 这是对原始 Fancybox（最新版本，顺便说一句）的修改。
Careful! From what I've read from the description, this won't work for cross-domains iFrames.
小心！根据我从描述中读到的内容，这不适用于跨域 iFrame。
回答by Saad
You can attach a handler to the fancybox iframe's load event and hide the loader.
您可以将处理程序附加到fancybox iframe 的加载事件并隐藏加载程序。
$('<a href="url_here"> </a>').fancybox({
type: 'iframe'
onComplete: function(){
$('#fancybox-frame').load(function(){
$.fancybox.hideActivity();
});
}
}).click();
$.fancybox.showActivity();
回答by Dead.Rabit
There are more answers in thisSO 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.
这篇SO帖子中有更多答案。不幸的是，我找不到“真正的”解决方案，但其他人正在替换页面叠加 CSS (#fancybox-overlay) 以包含微调器。然后当 iframe 页面最终加载时，它被放置在微调器上。
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 gifof 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:
我放弃了使用fancybox来处理加载图像，并认为我会分享我的解决方案。我gif在页面上添加了我自己的绝对定位加载，在调用fancybox之前显示它，我可以使用JQuery捕获iframe加载事件以隐藏微调器，如下所示：
$( "#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();
$('.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.
我还注意到在fancybox (v2.0.6) 源代码中播放时，如果autoSize 与iFrame 一起使用，fancybox 似乎使用load 事件来显示/隐藏加载动画，尽管我还没有测试过这个理论。
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();
}
回答by sandeep kumar
This is solve with z-index
这是用 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();
});
}
})
回答by peter li
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'.
FancyBox 提供了这种开箱即用的功能。当您单击按钮或链接打开 iframe 时，Fancybox 会在正文中附加一个 div#fancybox_loading，并在 iframe 完全加载后移除该 div。你只需要确保 div#fancybox-loading 是 'display:block'。
回答by WhyNotHugo
Fancybox 2exists now, and provides this out-of-the-box.
Fancybox 2现在存在，并提供这种开箱即用的功能。
