Question

I use the following code to load my JavaScript files. which works fine for me

<script  src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script  src="../js/jq/jquery.ui.core.js" ></script>
<script  src="../js/jq/jquery.ui.widget.js" ></script>
<script  src="../js/jq/jquery.ui.mouse.js" ></script>
<script  src="../js/jq/jquery.ui.mouse1.js" ></script>
<script  src="../js/jq/jquery.ui.mouse2.js" ></script>
<script  src="../js/MyLoader.js" ></script>

but when I change it into the following code And add async=”async” to script.

<script  src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" async="async"></script>
<script  src="../js/jq/jquery.ui.core.js" async="async"></script>
<script  src="../js/jq/jquery.ui.widget.js" async="async"></script>
<script  src="../js/jq/jquery.ui.mouse.js" async="async"></script>
<script  src="../js/jq/jquery.ui.mouse1.js" async="async"></script>
<script  src="../js/jq/jquery.ui.mouse2.js" async="async"></script>
<script  src="../js/MyLoader.js" async="async"></script>

It has strange behavior sometimes all javascript files loading sometime some javascript files are missing .

I check this in Chrome.
According to Documentation It has to be load but Asynchronously not or badly loading ??
The most important thing for me is to force MyLoader.js load as the last javascript then it can use the resources in the other libarary. So Question is how to delay one JS file to load as last javascript file ??

example of erorr in broswer

query.ui.mouse.js:20Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'
jquery.ui.widget.js:67Uncaught TypeError: undefined is not a function
jquery.ui.widget.js:67Uncaught TypeError: undefined is not a function
loader.js:6Uncaught TypeError: Object [object Object] has no method 'draggable'
2event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Answer 1

If the main problem you are trying to solve is to make sure that MyLoader.js is loaded last and that everything else is loaded before it, then simply remove the async attribute from all your script tags. The browser will then load and execute them in the order encountered in the file.

---

For more info on using async, you cannot make multiple JS files that depend upon each other and must be loaded in a specific order all be async. They may then load in the wrong order and cause errors.

For example, all the jQuery.ui files depend upon jquery.min.js so it MUST be loaded first. When you load things async, their order is no longer guaranteed so you are rolling the dice on whether they will be loaded in the correct order or not.

The best candidates for async loading are scripts that don’t depend upon any other async scripts, scripts that aren’t required for the initial rendering of the page and scripts that somewhat stand on their own. They do their own work when they load and the timing of when that work is done is not critical or coupled with anything else in the page. A perfect example of such a script is a script that records web statistics on a remote server. It isn’t involved in the initial rendering of the page, it doesn’t matter if it happens right when the page is loaded or a second or two later and it isn’t couple with anything else in the page.

See this article for some good discussion of the topic.

If you really wanted to load a bunch of dependent scripts async and load them in a specific order, then you would have to use a bunch of additional code to coordinate that. That level of order and coordination will not happen automatically with the async attribute.