Ответ 1
Что-то вроде этого?
Живой пример: http://jsfiddle.net/CPadm/
EDIT: Обновлено, так что iframe
скрывается до загрузки.
Live (обновлено) Пример: 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/