我知道这存在于某处,但我在几个小时的搜索中找不到它。我只需要将客户端外部页面加载到IFRAME中,但我想使用jquery ui来呈现加载图像,同时抓取外部数据。
简单的是,但我看到的不是整件事。
答案 0 :(得分:26)
这样的东西?
直播示例: http://jsfiddle.net/CPadm/
编辑已更新,以便在加载之前隐藏iframe
。
直播(已更新)示例: http://jsfiddle.net/CPadm/3/
HTML
<div id="button">Click to load</div>
<iframe></iframe>
<div id='loading'>Page is loading...</div>
CSS
iframe {
display: none;
}
#button {
background: blue;
color: white;
padding: 10px;
width: 100px;
}
#loading {
width: 300px;
padding: 20px;
background: orange;
color: white;
text-align: center;
margin: 0 auto;
display: none;
}
的jQuery
$('iframe').load(function() {
$('#loading').hide();
$('iframe').show();
});
$('#button').click(function() {
$('#loading').show();
$('iframe').attr( "src", "http://www.apple.com/");
});
相关的jQuery文档:
.load()
- http://api.jquery.com/load-event/ .hide()
- http://api.jquery.com/hide/ .show()
- http://api.jquery.com/show/ .attr()
- http://api.jquery.com/attr/