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

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 继续加载按照正常浏览器功能指定的内容。

我想您为启用加载程序而必须付出的努力将远远超过拥有它的好处。

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

当然，获得对 fancybox 覆盖的 iframe 的实际控制还存在进一步的复杂性，希望 API 能对此有所帮助，但我再次不确定这是否值得付出努力。