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

Question

UI专家,我试图在jquery模式对话框中的iframe中加载一个缓慢的网站,但我遇到了麻烦.这是我的用例:

1. 用一个"loading ..."gif打开一个jquery对话框
2. 在后台加载不同的URL
3. 加载后,用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,
    });

所以我的问题是 - 如何在混音中添加"loading ..."gif？应该可以 - 但我似乎无法搞清楚!

提前致谢!

Answer 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);
});
?

Answer 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
});?