Prealod iFrame - Loading image

Question

Hi,
I have implemented a jQuery Modal Dialog with an iFrame page inside and I was thinking to add a "loading" functionality to this dialog using GIF image.
My iFrame is implemented the way it is described here: {message:id=9426960} and I know that I can do this "loading thing" directly in my iFrame page this way:
[http://ayasenchuk.blogspot.com/2010/02/apex-page-with-animated-loading-modal.html]
But I want it do right in my dialog script, like it is done here:
http://plugins.jquery.com/content/jquery-ui-frame-dialog-loading-pane
or here:
http://www.blog.highub.com/javascript/javascript-library/preload-iframe-using-javascript/
or even here:
http://stackoverflow.com/questions/2939314/use-jquery-with-and-iframe-progress-indicator
Is that possible, does anyone has experienced this?
Thanks

Answer 1

Hi Vee,
Thank you for ypur reply and posted ideas to resolve my issue.
I really like the last option (the Plug-in) and actually before posting this thread I did contact Dna (developer of this Plug-In) to see how it is working.
So, I did try to put it into my app where it looks like this:
<link rel="stylesheet" href="http://tdanryan.com/demo/framedialog/assets/css/shpblack/jquery-ui-1.8.4.custom.css"
    type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="http://tdanryan.com/demo/framedialog/assets/js/jquery-framedialog-1.1.2.js"></script>
<style type="text/css">
.loading-image { background: transparent url('http://tdanryan.com/demo/framedialog/assets/im/progress-indicator-alpha.gif')
no-repeat center center; }        
</style>
<script type="text/javascript">
     var openNewInv = function(){
     var apexSession = $v('pInstance');
     var apexAppId = $v('pFlowId');
     var assetNumber = $v('P3_ID');
     var url = "http://son-orcl2:8080/apex/f?p="+apexAppId+":15:"+apexSession+"::NO:15:P15_ASSET_ID:"+assetNumber;
                jQuery.FrameDialog.create({
                    url: url,
                    loadingClass: 'loading-image',
                    title: 'Create Inventory Record',
                    width: 630,
                    height: 360,
                    autoOpen: false,
                    stack: true,
                    autoResize: true,
                    draggable: true,
                    buttons: {
                        "Cancel": function(){ $(this).dialog("close"); } 
                    open: function(event, ui){
                        // to hide a button panel
                        $(".ui-dialog-buttonpane").hide();
                        // this disables resizing without the iframe resized to content size.
                        $(".ui-resizable-handle").hide();
                    close: function(event, ui){                              
            $(function(){
                openNewInv();                           
        </script>It just gave me the errors (see below, the same as from my workspace test)
I did try to implement this solution on apex.oracle.com so it will load yahoo.com (instead of my application page link) in my modal window as an iFrame and will show a loading image while preloading wthe iFrame web site. But id doesnt work. I did use FireBug to see what is happening and it gives me errors when page is loading:
elem.document.body is null
                elem.document.body[ "client" + name ] || docElemProp;                      jquery-1.5.2.js (line 8346)and
jQuery.FrameDialog.create is not a function
                close: function(event, ui){                                                                f?p=32...61::YES (line 49)and when I click on "Create" to open my modal popup it gives:
jQuery.FrameDialog.create is not a function
                close: function(event, ui){                                                               f?p=32...61::YES (line 48)Here is my workspace link and credentioal so u can see my script.
[http://apex.oracle.com/pls/apex/f?p=32646]
user: guest
psw: apex_demo
Thanks