Fancybox：在加载iframe内容时显示加载动画 [英] Fancybox: Show loading animation while loading iframe content

问题描述

当使用jQuery和 fancybox 在iframe中显示另一个页面时，我想在页面中显示加载动画iframe内部正在加载。使用ajax加载内容时可以这样做，但在使用iframe时我想要相同的东西。是否有可能从api加载iframe中的内容时加载动画？

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?

这是在fancybox中显示iframe的代码：

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

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

推荐答案

加载动画未显示的原因是因为fancybox没有任何关于此类内容的加载概念;它只是覆盖指定尺寸的iframe，一旦完成就fancybox而言，就完成了工作。

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.

iframe然后继续加载按照普通浏览器功能指定的内容。

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.

无论如何，在动态插入的iframe中 jQuery .ready 应该帮助你的路;它向您展示了如何将回调推送到iframe的加载事件，您可以使用它在点击后添加它后删除加载微调器？

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?

当然还有实现对iframe的实际控制的复杂性，fancybox覆盖，希望API可以帮助这一点，但我再次不确定它值得努力。

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内容时显示加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！