在 jQuery UI 模式对话框中显示 iframe 的加载动画答案

【问题标题】：Showing a loading animation for an iframe in a jQuery UI modal dialog在 jQuery UI 模式对话框中显示 iframe 的加载动画
【发布时间】：2012-12-07 06:37:14
【问题描述】：

用户界面专家，我正在尝试在 jquery 模态对话框中的 iframe 中加载一个缓慢的网站，但我遇到了麻烦。这是我的用例：

打开一个 jquery 对话框，其中包含一个“正在加载...”gif
在后台加载不同的 URL
加载后，将 gif 替换为 URL

我可以直接用下面的代码打开网址：

    var popup = $('<div id="popup123" class="dialog"></div>').prependTo('body');
    popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>');
    $('.dialogIFrame').attr("src", 'http://myslowsite');
    $('.dialogIFrame').show();
    popup.dialog({
        modal: true,
        title: 'Site',
        width: 1000,
        height: 500,
    });

所以我的问题是 - 如何添加“正在加载...” gif 到组合中？应该是可能的 - 但我似乎无法弄清楚！

提前致谢！

【问题讨论】：

标签： javascript jquery jquery-ui iframe

【解决方案1】：

以下是创建 iframe、将其定向到站点并在完成加载时执行回调的示例：http://jsfiddle.net/74nhr/109/

$(document).ready(function() {
    var status = $('#status');
    var iframe = $('iframe');

    status.val('Loading...'); // show wait

    iframe.on('load', function() {
        status.val('Done!');  // remove wait, done!
    });

    setTimeout(function() {
        iframe.attr('src', 'http://www.archive.org');
    },
    1000);
});

【讨论】：

感谢赛门。我怀疑这行得通——因为 iframe 仍然有 display:none——而且我在 .attr('src') - 第三行之后做一个 .show 。我试过了，它不显示加载 gif。也许有人可以发布完整的代码？我承认我是 jquery UI 的新手。
您当然可以只显示带有加载 HTML 的 iframe。也许你想要一些其他的功能？无论如何，我已经更新了答案。
Cymen - 我想在 iframe 本身中显示 Loading..。我正在尝试上面的代码。看来我需要适应 jquery UI 对话框的情况。让我试试……
适用于 Jquery 1.7.x 及更高版本。 +1 在我生日时给出这个答案:)

【解决方案2】：

看到这个。希望对您有所帮助.. http://jsfiddle.net/CEJhb/1/

var popup = $('<div id="popup123" class="dialog"><img id="load" src="http://jsfiddle.net/img/logo.png" alt="loading..."/></div>').prependTo('body');

popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>');
var $iFrame = $('iframe');

$iFrame.load(function() {
$('.dialogIFrame').show();
$('#load').hide();
});

$('.dialogIFrame').attr("src", 'http://www.google.com');

popup.dialog({
modal: true,
title: 'Site',
width: 1000,
height: 500
});

【讨论】：

这更接近我想要的。我正在尝试这个。