PDA

View Full Version : splash screen not displayed until application loaded



blomasky
4 Feb 2014, 8:49 AM
Since my ExtJS app is about 5 meg, it take a few seconds (5-10) to get downloaded and instantiated. I have a splash screen on my application.init function, but that is not displayed until the entire app has downloaded.

Question: How can I have a splash screen immediately displayed when the user goes to my URL?


thanks
Bruce

evant
4 Feb 2014, 12:44 PM
You need to have it sit outside your init() method.

Have a look at how the /examples/index.html page loads in the SDK download:



<div id="code-load" style="display:none;">
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>

<!-- App.js contains Ext.App, a simple, re-usable Application component -->
<script type="text/javascript" src="shared/extjs/App.js"></script>
<script type="text/javascript" src="shared/extjs/site.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript" src="init.js"></script>
</div>


Later inside the ready block, it hides the code-load element.