I'm trying to implement a full preloader for my application. I mean, I want the preloader mask to stay there until the whole User Interface has been loaded, not only the ext-js libraries but also my own scripts and the images. At the moment my preloader waits until the extjs library is loaded, but then the UI appears and still I have to wait for the images (buttons, bars, etc.) to end loading. I am using the following on my home page:

    <div id="loading-mask"></div>
    <div id="loading">
      <span id="loading-message">Loading. Please wait...</span>
    <script type="text/javascript"> 
        document.getElementById('loading-message').innerHTML = 'Loading Core API...';
        document.getElementById('loading-message').innerHTML = 'Loading GUI ...';
            var loadingMask = Ext.get('loading-mask');
            var loading = Ext.get('loading');
            //    Hide loading message            
            loading.fadeOut({ duration: 0.2, remove: true });
            //    Hide loading mask
                xy: loading.getXY(),
                width: loading.getWidth(),
                height: loading.getHeight(),
                remove: true,
                duration: 1,
                opacity: 0.1,
                easing: 'bounceOut'
    <div id="container"></div>
Any suggestions? I want the user getting the full UI ready to use after the preload mask disappear, but now she still has to wait for some bits of the UI to be loaded.