On Sat, Mar 5, 2011 at 6:46 PM, Jarek Foksa <[email protected]> wrote: > 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] >
Yes Safari loads scripts asynchronously but it ensures all of them are completely loaded before firing the "DOMContentLoaded" event. To get the same behavior on other recent browsers add the "async" attribute to the scripts elements and start your code at "DOMContentLoaded" time. If instead your objective is to have a cross-browser solution, working on IE + older browsers, add an "onload" listener to each script that notifies you when all scripts have been loaded. -- Diego -- 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]
