Verwenden Sie Jquery With und Iframe & Progress Indicator

Question

Ich weiß, dass es da draußen gibt, irgendwo, aber ich habe es in ein paar Stunden der Suche nicht gefunden. Ich muss einfach eine externe Seite eines Clients in ein IFRAME laden, aber ich möchte jquery ui verwenden, um das geladene Bild darzustellen, während es die externen Daten erfasst.

Einfach ja, aber ich habe Stücke davon nicht die ganze Sache gesehen.

Answer 1

So ähnlich?

anschauliches Beispiel:http://jsfiddle.net/CPadm/

EDIT: aktualisiert, so dass die iframe bis loaded verborgen ist.

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

---

Relevante Dokumente 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/