Usa Jquery With e Iframe & Progress Indicator

Question

So che esiste già da qualche parte, ma non l'ho trovato in poche ore di ricerca. Devo semplicemente caricare una pagina esterna dei client in un IFRAME, ma voglio usare jquery ui per presentare l'immagine di caricamento mentre sta acquisendo i dati esterni.

Semplice sì, ma ho visto pezzi di questo non tutto.

Answer 1

Qualcosa di simile?

Esempio dal vivo:http://jsfiddle.net/CPadm/

EDIT: aggiornato in modo che il iframe è nascosto fino a quando caricato.

live (aggiornato) Esempio: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/"); 
});​ 

---

rilevanti docs 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/