I have a document, which is loaded twice :
.js files. href of the style sheet to use. The goal is to avoid the ugly effect of applying the styles after displaying the page; The design change is clearly appreciated.
Currently, I do it like this:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link id="SKIN.CSS" rel="stylesheet"/>
<script type="text/javascript" charset="UTF-8" src="lib/spin.min.js"></script>
<script id="APP.JS" type="text/javascript" charset="UTF-8"></script>
<title></title>
</head>
<body>
<div id="FSAUX" style="height:1em;width:1em;left:100%;position:fixed;top:100%;"></div>
<div id="CMAUX" style="height:1cm;width:1cm;left:100%;position:fixed;top:100%;"></div>
<script>
window.Gui = { };
window.App = {
$Spinner: new Spinner( )
};
App.$Spinner.spin( document.body );
( function( ) {
var curr = window.location.href,
url = 'app.php?sw=' + screen.width.toString( ) + '&sh=' + screen.height.toString( ),
element = document.getElementById( 'FSAUX' );
curr = curr.substring( 0, ( curr.indexOf( '#' ) == -1 ) ? curr.length : curr.indexOf( '#' ) );
//this removes the query after the file name, if there is one
curr = curr.substring( 0, ( curr.indexOf( '?' ) == -1 ) ? curr.length : curr.indexOf( '?' ) );
//this removes everything before the last slash in the path
curr = curr.substring( curr.lastIndexOf( '/' ) + 1, curr.length );
url += '&fw=' + element.offsetWidth.toString( );
url += '&fh=' + element.offsetHeight.toString( );
element = document.getElementById( 'CMAUX' );
url += '&cw=' + Math.round( screen.width / element.offsetWidth ).toString( );
url += '&ch=' + Math.round( screen.height / element.offsetHeight ).toString( );
url += '&file=' + curr;
document.getElementById( 'APP.JS' ).src = url;
} )( );
</script>
<script type="text/javascript" charset="UTF-8" src="lib/webix_debug.js"></script>
<script type="text/javascript" charset="UTF-8" src="lib/i18n/es.js"></script>
<script>
webix.ready( function( ) {
webix.i18n.setLocale( 'es-ES' );
webix.ui.fullScreen( );
App.Load( );
} );
</script>
</body>
</html>
From there, I call the true application, generated in PHP . The code that really arrives to the browser is
App.Load = function( ) {
document.getElementById( 'SKIN.CSS' ).href = 'http://cdn.webix.com/4.3/webix.css';
webix.ready( App.Run );
}
App.Run = function( ) {
'use strict';
App.$Routes = {
'home': App.Home
}
window.onbeforeunload = onUnload;
// Prevenimos el botón 'back'.
if( ( 'history' in window ) && ( 'pushState' in window.history ) ) {
onNavigateBack( );
window.addEventListener( 'popstate', onNavigateBack );
}
Gui.Init( );
// ... Resto del código ...
As you can see, there are 2 calls at webix.ready( ) . One in the index.html , from where I call App.Load( ) when finishing loading the dependencies of the first one.
Once in App.Load( ) , I set the href , and I call back to webix.ready( ) , to launch the true start function: App.Run( ) . This scheme does not work . App.Run( ) is called before to load the styles.
I have also tried a pedreste version of the above:
App.Load = function( ) {
document.getElementById( 'SKIN.CSS' ).href = 'http://cdn.webix.com/4.3/webix.css';
setTimeout( loaded, 0 );
function loaded( ) {
if( document.readyState === 'complete' ) {
setTimeout( App.Run, 0 );
} else
setTimeout( loaded, 10 );
}
}
App.Run = function( ) {
'use strict';
App.$Routes = {
'home': App.Home
}
window.onbeforeunload = onUnload;
// Prevenimos el botón 'back'.
if( ( 'history' in window ) && ( 'pushState' in window.history ) ) {
onNavigateBack( );
window.addEventListener( 'popstate', onNavigateBack );
}
Gui.Init( );
// ... Resto del código ...
Apparently, webix.ready( ) can only be called 1 time per document. In the pedreste version, it seems that the status of document.readyState does not change after completing the full load the first time.
How do I wait for the document to load completely 2 times ?