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

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

打开一个jquery对话框，只需一个“加载…”gif

在后台加载不同的URL

加载后，将gif替换为URL

我可以用下面的代码直接打开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,
    });

var popup=$（''）.prependTo（'body'）；
popup.prepend（“”）；
$（'.dialogIFrame'）.attr（“src”，'http://myslowsite');
$（'.dialogIFrame'）.show（）；
弹出对话框({
莫代尔：是的，
标题：“网站”，
宽度：1000，
身高：500，
});

所以我的问题是-我如何添加“加载…”gif到混合？应该是可能的，但我似乎不明白

---

提前谢谢

以下是创建iframe、将其定向到站点并在加载完成后执行回调的示例：

---

看这个。希望能有帮助

var popup=$（''）.prependTo（'body'）；
popup.prepend（“”）；
变量$iFrame=$（'iFrame'）；
$iFrame.load（函数（）{
$（'.dialogIFrame'）.show（）；
$（'#load'）.hide（）；
});
$（'.dialogIFrame'）.attr（“src”，'http://www.google.com');
弹出对话框({
莫代尔：是的，
标题：“网站”，
宽度：1000，
身高：500
});​

谢谢Cymen。我怀疑这是否有效-因为iframe仍然有display:none-并且我在.attr（'src'）-第3行之后做了一个.show。我试过了，但它没有显示正在加载的gif。也许有人可以发布完整的代码？我承认我对jQueryUI不熟悉。当然，您可以只显示带有加载HTML的iframe。也许你想要一些其他的功能？无论如何，我已经更新了答案。Cymen-我想显示加载。。在iframe本身中。我正在尝试上面的代码。似乎我需要适应jQueryUI对话框。让我试试……在jQuery1.7.x和更高版本上工作+我想在我生日的时候给出这个答案：）这更接近我想要的。我正在试这个。

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

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