Use Jquery With and Iframe & Progress Indicator

Question

I know this exists out there, somewhere but I haven't found it in a few hours of searching. I simply have to load a clients external page into an IFRAME, but I want to use jquery ui to present the loading image while it's grabbing the external data.

Simple yes, but I've seen pieces of this not the whole thing.

Answer 1

Something like this?

Live Example: http://jsfiddle.net/CPadm/

EDIT: Updated so that the iframe is hidden until loaded.

Live (updated) Example: 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/");
});​

---

Relevant jQuery docs:

• .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/