Let's say that I have four scripts: init.js, script-1.js, script-2.js
and script-3.js. Only init.js is declared in XHTML file, the other
three scripts are loaded from init.js. The code for each file is as
follows:
init.js
----------------------------------------------------
function loadScript(url) {
var script = document.createElement('script');
script.src= url + "?r=" + Math.floor(Math.random()*10000);
script.setAttribute("charset", "UTF-8")
document.querySelector('head').appendChild(script);
}
loadScript("script-1.js");
loadScript("script-2.js");
loadScript("script-3.js");
script-1.js:
----------------------------------------------------
console.log("Executing script-1.js");
script-2.js
----------------------------------------------------
console.log("Executing script-2.js");
script-3.js
----------------------------------------------------
console.log("Executing script-3.js");
I'm always getting correct results in Google Chrome, Firefox and Opera:
> Executing script-1.js
> Executing script-2.js
> Executing script-3.js
But for some reason the scripts are loaded in random order by Safari:
> Executing script-3.js
> Executing script-1.js
> Executing script-2.js
It looks like loadScript() function runs asynchronously in Safari and
synchronously in all other browsers. Why? Do you know a more reliable
way for dynamically loading script files? So far I have stumbled upon
RequireJS library, though it seems to be an overkill for my tiny
projects.
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
