PDA

View Full Version : Dynamic script insert before rest of scripts are loaded.



kortovos
20 Oct 2010, 4:49 AM
Does anyone know if you can up the loading of JS files on hold until a specific JS file has been loaded?
For instance, index.html


<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Kitchen Sink</title>

<link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="resources/css/sink.css" type="text/css">
<link rel="stylesheet" href="resources/css/codebox.css" type="text/css">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../../ext-touch.js"></script>
<script type="text/javascript" src="src/Language.js"></script>
<script type="text/javascript" src="src/CodeBox.js"></script>
<script type="text/javascript" src="src/index.js"></script>
<script type="text/javascript" src="src/demos/carousel.js"></script>
<script type="text/javascript" src="src/demos/icons.js"></script>
<script type="text/javascript" src="src/demos/map.js"></script>
<script type="text/javascript" src="src/demos/tabs.js"></script>
<script type="text/javascript" src="src/demos/bottomtabs.js"></script>
<script type="text/javascript" src="src/demos/toolbars.js"></script>
<script type="text/javascript" src="src/demos/touch.js"></script>
<script type="text/javascript" src="src/demos/forms.js"></script>
<script type="text/javascript" src="src/demos/buttons.js"></script>
<script type="text/javascript" src="src/demos/animations.js"></script>
<script type="text/javascript" src="src/demos/data.js"></script>
<script type="text/javascript" src="src/demos/list.js"></script>
<script type="text/javascript" src="src/demos/LeafSelectedPlugin.js"></script>
<script type="text/javascript" src="src/demos/nestedlist.js"></script>
<script type="text/javascript" src="src/demos/audio.js"></script>
<script type="text/javascript" src="src/demos/video.js"></script>
<script type="text/javascript" src="src/demos/picker.js"></script>
<script type="text/javascript" src="src/demos/sheets_overlays.js"></script>
<script type="text/javascript" src="src/structure.js"></script>
</head>
<body>
</body>
</html>And the content of Language.js


Ext.locale = '';
(function () {
var headID = document.getElementsByTagName("head")[0],
newScript = document.createElement('script');

function getLocaleLanguage() {
if (navigator)
if (navigator.language)
return navigator.language.split('-')[0];

else if (navigator.browserLanguage)
return navigator.browserLanguage.split('-')[0];

else if (navigator.systemLanguage)
return navigator.systemLanguage.split('-')[0];

else if (navigator.userLanguage)
return navigator.userLanguage.split('-')[0];

else
return 'en';
};

// Create a new script tag
newScript.type = 'text/javascript';
newScript.src = '/src/language/local-' + getLocaleLanguage() + '.js';
headID.appendChild(newScript);
}());
The idea it to load a JS file with the correct language inside it.
But so far, all other JS files which are defined in index.js are first loaded.
Content of local-en.js:

Ext.locale = {
loginTitle: 'Login',
nameButton: 'Click Me',
passwordLabel: 'Password',
backText: 'back'
}
{xtype : 'button',
ui : 'action_round',
text: Ext.locale.nameButton,
maxWidth : 150,
scope : this
}This button will have no text.

Is it possible to have the loading of the other JS files stopped until the appropriate language file has been loaded?