Listen for loaded event on iframe

[hermanvandermaas]

Anyone knows how I can make my app listen for an event on an iframe, indicating it is fully loaded?

I have two kinds of iframes in my Sencha Touch 2 app:

• Embedded Vimeo movies (youtube doesn't work well with html5)
• Google Maps

Both iframe embeds work fine, interaction on the iframes works also. At least on Android. However when the app has launched, some iframes are still loading. In the Android browser the app reacts slowly to touch events, bad scrolling and tapping etc. right after launch. Only after a few seconds it becomes responsive. I suspect the loading of the iframes in the background is causing this. So, i'm thinking of showing a loadmask until all iframes have loaded (or don't load at all). Hence my question.

Help would be greatly appreciated.

[mitchellsimoens]

The iframe element will actually fire a load event.

[hermanvandermaas]

Thank you for your help. I made a working example at senchafiddle here: http://www.senchafiddle.com/#AgV2f#9PqkW.

On startup the app shows a loadmask. After the load event fired on an iframe, the loadmask is removed. I actually put the iframe 'load' listener inside a Sencha Touch 'initialize' listener. Is this right or should it be a 'painted' listener?

The relevant code of the panel object:

            html: '<iframe style="width:90%;height:100%;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps/ms?msa=0&amp;msid=203503883063435584829.0004c3dc968de020be3ed&amp;ie=UTF8&amp;ll=52.255503,5.269243&amp;spn=0,0&amp;t=h&amp;iwloc=0004c3dca4e3baa4e0808&amp;output=embed" id="fitmap782215" ></iframe>',
            listeners: {
                'initialize': function(thisss, eOpts) {
                    var myiframe = document.getElementById('fitmap782215');
                    
                    if (myiframe.attachEvent) {
                        myiframe.attachEvent("onload", a);
                    } else if (myiframe.addEventListener) {
                        myiframe.addEventListener("load", a, false);
                    }
                    
                    function a() {                        
                        Ext.Viewport.unmask();
                    }
                    
                }
            }

Anyone knows why the title in the titlebar in the in the Senchafiddle example is Con... instead of Contact? Looks like an error in the standard css.