Display loading.gif until page is loaded in iframe inside jquery ui dialog

Question

I would like to display loading.gif when clicking jquery ui dialog with iframe until page is loaded inside iframe. Does anybody knows something about this issue? Is it possible? Here is my code:

$('.dialog').click(function(e) {

    e.preventDefault();
    var $this = $(this);
    var horizontalPadding = 30;
    var verticalPadding = 30;

    $('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
        title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
        autoOpen: true,
        width: 800,
        height: 500,
        modal: true,
        buttons: {
            "Zatvori": function() {
                $(this).dialog("close");
            } 
        },

        resizable: true,
        autoResize: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        },

        close: function(event, ui) {
            $(function() {
                var theVal = $.cookies.get('updatedForm');

                if (theVal != null) {
                    $.cookies.del('updatedForm');
                    location.reload(true);
                }
            });
        }

    }).width(800 - horizontalPadding).height(500 - verticalPadding);

Answer 1

Problem solved. I posted this question on Elijah Manor blog (above code is from his blog) http://elijahmanor.com/webdevdotnet/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx#id_6dccd7c1-56da-49b3-bb61-3b50a12aae45 and got solution by Dan who posted link to his blog for jQuery Frame Dialog plugin.

Hope this helps somebody. It helped me a lot.