Question

UI experts,
I’m trying to get a slow website loaded in an iframe within a jquery modal dialog, but I’m having trouble. This is my use case:

1. open a jquery dialog, with a single “loading…” gif
2. load a different URL in the background
3. once loaded, replace the gif with the URL

I’m able to open the URL directly with code as below:

    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,
    });

So my question is – how do I add a “loading…” gif to the mix? Should be possible – but I can’t seem to figure out!

Thanks in advance!

Answer 1

See this. Hope it helps.. 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
});​