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

Question

UI专家， 我试图在jQuery模式对话框中的iframe中加载缓慢的网站，但我遇到了麻烦。这是我的使用情况：

1. 打开一个jQuery对话框，用一个单一的“载入中...” GIF
2. 负载不同的URL在后台加载一次
3. ，与URL
取代GIF

我能够直接与下面的代码打开的网址：

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

所以我的问题是 - 如何做我添加一个“载入中...” G如果对混合？应该是可能的 - 但我似乎无法弄清楚！

在此先感谢！

Answer 1

看到这一点。希望它有帮助.. 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 
});​ 

Answer 2

下面是当它完成加载创建一个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); 
}); 
​