javascript 在 jQuery UI 模式对话框中显示 iframe 的加载动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13758150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing a loading animation for an iframe in a jQuery UI modal dialog
提问by ragebiswas
UI experts, I'm trying to get a slow website loaded in an iframe within a jquery modal dialog, but I'm having trouble. This is my use case:
UI 专家，我正在尝试在 jquery 模式对话框中的 iframe 中加载一个缓慢的网站，但我遇到了问题。这是我的用例：
- open a jquery dialog, with a single "loading..." gif
- load a different URL in the background
- once loaded, replace the gif with the URL
- 打开一个 jquery 对话框，带有一个“正在加载...”gif
- 在后台加载不同的 URL
- 加载后，将 gif 替换为 URL
I'm able to open the URL directly with code as below:
我可以使用以下代码直接打开 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,
});
So my question is - how do I add a "loading..." gif to the mix? Should be possible - but I can't seem to figure out!
所以我的问题是 - 如何在混合中添加“正在加载...”gif？应该是可能的 - 但我似乎无法弄清楚！
Thanks in advance!
提前致谢！
回答by Cymen
Here is an example of creating an iframe, directing it to a site and performing a callback when it finishes loading: http://jsfiddle.net/74nhr/109/
这是创建 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);
});
?
回答by Anujith
See this. Hope it helps.. http://jsfiddle.net/CEJhb/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
});?
