Question

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

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

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

Answer 1

您可以简单地将带有CSS的背景添加到下面的图层，当iframe准备就绪时，它会将您的背景与微调器重叠

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

Answer 2

这对我有用：

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

        }

Answer 3

我有同样的问题。这是我在阅读史蒂夫的答案后如何实现问题的解决方案。

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

});

当然，这对于具有X-Frame-Options HTTP标头集的外部URL不起作用。例如https://www.google.com.au/。

Answer 4

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

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

我认为你必须付出的努力才能实现装载机，这远远超过拥有它的好处。

无论如何，问题jQuery .ready in a dynamically inserted iframe应该会帮助你;它向您展示了如何将回调推送到iframe的load事件中，您可以使用它在点击后添加它后删除加载微调器？

当然对于实际控制iframe的fancybox覆盖有一些进一步的复杂化，希望API可以帮助这一点，但我再次确信这是值得的。

Answer 5

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

应该有帮助:-) 它是对原始Fancybox（最新版本，BTW）的修改。

小心！根据我从描述中读到的内容，这不适用于跨域iFrame。

Answer 6

您可以将处理程序附加到fancybox iframe的加载事件并隐藏加载程序。

$('<a href="url_here"> </a>').fancybox({
        type: 'iframe'
        onComplete: function(){
            $('#fancybox-frame').load(function(){
                $.fancybox.hideActivity();
            });
        }
    }).click();

    $.fancybox.showActivity();

Answer 7

this SO帖子中有更多答案。不幸的是，我找不到“真正的”解决方案，但其他人正在取代页面覆盖CSS（#fancybox-overlay）以包含一个微调器。然后，当iframe的页面最终加载时，它被放置在微调器上。

修改

我放弃使用fancybox处理加载图像，并认为我会分享我的解决方案。我在页面中添加了一个绝对定位的gif加载页面，在调用fancybox之前显示它，我可以使用JQuery捕获iframe加载的事件来隐藏微调器，如下所示：

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

如果您没有像我一样手动调用fancybox，我认为您可以通过点击事件轻松附加此代码，即：

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

我还注意到在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(); }

Answer 8

Fancybox 2现在已经存在，并提供了开箱即用的功能。

Answer 9

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

Answer 10

FancyBox提供了现成的功能。当您单击按钮或链接以打开iframe时，Fancybox会将div＃fancybox_loading附加到主体上，并在iframe完全加载后删除div。您只需要确保div＃fancybox-loading为'display：block'。

image shows the div#fancybox-loading

Answer 11

no-javascript，对每个浏览器的反应就绪解决方案支持（html 1.0）

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

另一种具有相同支持但没有额外请求的方法：

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

Fancybox：在加载iframe内容时显示加载动画

11 个答案: