In the parent.html file, I’ll make reference to a child.html file along with displaying a “Loading” spinning icon.
< iframe src=”child.html>
In the javascript for parent.html file, I’ll hide the iframe until I’m ready to launch the app by making the iframe hidden. The end user will just see the loading icon.
|
1
2
3
4
5
6
7
8
9
10
11
|
<script type="text/javascript">//hide the flicker of the iframevar frame_visible = document.createElement('div'), ref = document.getElementsByTagName('base')[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][0] ||document.getElementsByTagName('script')[0];frame_visible.innerHTML = '­<style> iframe { visibility: hidden; } </style>';ref.parentNode.insertBefore(frame_visible, ref);</script> |
The child.html will contain all references to ExtJs Javascript and CSS. Once the child.html loads, your app.js will receive the Ext.application.launch() invocation, I will remove the visibility hidden of the child frame, and the app will draw nicely.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Ext.application({ name: 'Test', appFolder: 'app', cmp: null, launch: function() { //before showing the ExtJS app remove the hidden on the child frame style attribute parent.ref.parentNode.removeChild(parent.frame_visible) this.cmp = Ext.create('Test.AppPanel',{ renderTo: 'content_extjs' }); this.cmp.show(); }}); |
Similar to Gmail with their loading progress bar, this technique gives the user the impression that something is going on while the app-all.js is being downloaded.
Joel Garcia has been building AllCode since 2015. He’s an innovative, hands-on executive with a proven record of designing, developing, and operating Software-as-a-Service (SaaS), mobile, and desktop solutions. Joel has expertise in HealthTech, VoIP, and cloud-based solutions. Joel has experience scaling multiple start-ups for successful exits to IMS Health and Golden Gate Capital, as well as working at mature, industry-leading software companies. He’s held executive engineering positions in San Francisco at TidalWave, LittleCast, Self Health Network, LiveVox acquired by Golden Gate Capital, and Med-Vantage acquired by IMS Health.
