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.

Solution

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/