Utiliser Jquery Avec et Iframe & Indicateur de Progrès

Je sais que cela existe là-bas, quelque part, mais je n'ai pas trouvé, en quelques heures de recherche. Je n'ai qu'à charge d'un client externe page dans une IFRAME, mais je veux l'utiliser jquery ui pour présenter le chargement de l'image alors que c'est l'accaparement des données externes.

Simple oui, mais j'ai vu des morceaux de ce pas l'ensemble de la chose.

OriginalL'auteur imagindesign | 2010-05-30

  1. 26

    Quelque chose comme cela?

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

    EDIT: mis à Jour afin que le iframe est caché jusqu'à ce que chargé.

    En direct (mise à jour) Exemple: 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/");
});​

    Pertinentes jQuery docs:

    +1 @patrick ps: merci pour l'exemple.

    OriginalL'auteur user113716