Eine Ladeanimation für einen Iframe in einem modalen Dialogfeld der jQuery-Benutzeroberfläche anzeigen

Question

UI-Experten, Ich versuche, eine langsame Website in einem iframe in einem jquery modalen Dialog zu laden, aber ich habe Probleme. Das ist mein Anwendungsfall:

1. ein jquery Dialog zu öffnen, mit einem einzigen "loading ..." gif
2. Last eine andere URL im Hintergrund
3. einmal geladen, ersetzen Sie die gif mit der URL

ich bin in der Lage, die URL mit dem Code direkt zu öffnen, wie unten:

var popup = $('<div id="popup123" class="dialog"></div>').prependTo('body'); 
    popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>'); 
    $('.dialogIFrame').attr("src", 'http://myslowsite'); 
    $('.dialogIFrame').show(); 
    popup.dialog({ 
     modal: true, 
     title: 'Site', 
     width: 1000, 
     height: 500, 
    }); 

Also meine Frage ist - wie kann ich ein hinzufügen „loading ...“ g wenn zur Mischung? Sollte möglich sein - aber ich kann nicht scheinen, herauszufinden!

Vielen Dank im Voraus! Hier

Answer 1

dies sehen. Hoffe es hilft .. http://jsfiddle.net/CEJhb/1/

var popup = $('<div id="popup123" class="dialog"><img id="load" src="http://jsfiddle.net/img/logo.png" alt="loading..."/></div>').prependTo('body'); 

popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>'); 
var $iFrame = $('iframe'); 

$iFrame.load(function() { 
$('.dialogIFrame').show(); 
$('#load').hide(); 
}); 

$('.dialogIFrame').attr("src", 'http://www.google.com'); 

popup.dialog({ 
modal: true, 
title: 'Site', 
width: 1000, 
height: 500 
});​ 

Answer 2

ist ein Beispiel für einen Iframe zu schaffen, ist es auf eine Website zu leiten und einen Rückruf durchzuführen, wenn es fertig geladen: http://jsfiddle.net/74nhr/109/

$(document).ready(function() { 
    var status = $('#status'); 
    var iframe = $('iframe'); 

    status.val('Loading...'); // show wait 

    iframe.on('load', function() { 
     status.val('Done!'); // remove wait, done! 
    }); 

    setTimeout(function() { 
     iframe.attr('src', 'http://www.archive.org'); 
    }, 
    1000); 
}); 
​