Clash Royale CLAN TAG#URR8PPP

Load jquery asynchronously before other scripts

I've added the async attrib to my javascript inclusion HTML.

So now I've:

async

<script async src="jquery.myscript.js"></script>


And this works with all JS I load, all except jquery.

If I add async to jQuery <script> tag all others script who depend from jquery don't work.

async

<script>

In that jsfiddle you can see the problem:
http://jsfiddle.net/uFbdV/

In the example I've used <script> Mycode </script> instead of including an external file.js, but this doesn't change the situation.

<script> Mycode </script>

I'd like to run jQuery with async attrib and run other few external scripts asynchronously only after jquery is loaded.

It is possible?

async=""

async

=""

5 Answers
5

I'd like to run jQuery with async attrib and run other few external
scripts asynchronously only after jquery is loaded.

What does that mean? It sounds a lot like you want to load jQuery first, then other things when it's done. So you want to load it synchronously. If you still want to use the async way, you could define an onload function to continue loading other things once jQuery is ready. Or you could use defer. Both of these are explained here: https://davidwalsh.name/html5-async

async

onload

defer

This is a great use-case for defer:

defer

<script defer src="jquery.js"></script>
<script defer src="custom.js"></script>


Neither of these tags will block rendering. The browser can download jquery.js and custom.js in parallel. It will execute jquery.js as soon as it has been downloaded and the DOM has been loaded, and custom.js will execute afterwards.

jquery.js

custom.js

jquery.js

custom.js

Sadly, there a few issues:

defer

defer

defer

This may be what you are looking for:
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - jQl an asynchronous jQuery Loader.

It asynchronously loads jQuery without blocking other components:

jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');


jQl automatically catches all jQuery().ready() calls, so you can write:

jQuery().ready()

<script type="text/javascript">
jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
jQuery('document').ready(function()
alert('Hello world');
);
</script>


jQl will queue these function calls, and execute them as soon as jQuery is loaded and the DOM is ready, as they would be executed in the usual way.

Using a recursive function

I have written a function to do this job very nice.

// scripts.js


function loadScripts(urls, length, success)
if(length > 0)
script = document.createElement("script");
script.src = urls[length-1];
console.log();
script.onload = function()
console.log('%c Script: ' + urls[length-1] + ' loaded!', 'color: #4CAF50');
loadScripts(urls, length-1, success);
;
document.getElementsByTagName("head")[0].appendChild(script);

else
if(success)
success();




/* Write links sorted from last one to first to load */
/* Here, jquery will be loaded first, then materialize and then wow libray. */
urls = [ '/js/wow.js', '/js/materialize.js', '/js/jquery.js'];

loadScripts(urls, urls.length, function()
/* Codes inside of here will be executed after js files load */

);


You can put these code in a file like scripts.js and load it with async attribute.

scripts.js

async

<script async src="js/scripts.js"></script>


For css async load, refer to edited versions of this answer.

<script>var JSdep = [
["//ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.4.min.js", "window.jQuery", "/bundle/jquery"],
["//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", "self.framework === 'bootstrap'", "/bundle/bootstrap"],
["//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js", "window.jQuery && window.jQuery.ui && window.jQuery.ui.version === '1.12.1'", "/bundle/jqueryui"],
["//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js", "window.jQuery && window.jQuery.fn.selectpicker", "/bundle/bootstrap-select"],
]
</script>
<script type="text/javascript">
var downloadJSAtOnload = function (e)
var src = e.srcElement.src.toString();
//console.log("[jquery] loaded", src);
for (var i = 0; i < JSdep.length; i++)
if (src.indexOf(JSdep[i][0]) !== -1) (eval(JSdep[i][1])))
console.log("[jquery] loaded ok", src);
break;
else
console.log("[jquery] fail", src);
return;



if (i === JSdep.length)
console.log("[jquery] fallback loaded ok", src);

if (jqloaded)
return;

jqloaded = true;
for (var i = 1; i < JSdep.length; i++)

var downloadJSAtOnerror = function (e)
var src = e.srcElement.src.toString();
console.log("[jquery] error", src);
for (var i = 0; i < JSdep.length; i++)
if (src.indexOf(JSdep[i][0]) !== -1)
console.log("[jquery] failed try fallback", src);
dljquery([JSdep[i][2], JSdep[i][1]]);
return;


console.log("[jquery] failed on fallback", src);
return;

// Add a script element as a child of the body
var dljquery = function (src)
//console.log("[jquery] start", src);
var element = document.createElement("script");
element.src = src[0];
element.async = "async";
try
document.body.appendChild(element);
catch (err)
console.log("[jquery] err", err);

if (element.addEventListener)
element.addEventListener("load", downloadJSAtOnload, false);
element.addEventListener("error", downloadJSAtOnerror, false);
else if (element.attachEvent)
element.attachEvent("onload", downloadJSAtOnload);
element.attachEvent("onerror", downloadJSAtOnerror);
else
element.onload = downloadJSAtOnload;
element.onerror = downloadJSAtOnerror;


// var fb = "/bundle/jquery";

var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function () window.setTimeout(dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]), 0); );
else window.addEventListener('load', dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]));

var jqloaded = false;

function doOnload()
console.log("[jquery] onload");

// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", doOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", doOnload);
else window.onload = doOnload;
</script>


found it
i had problems with bootstrap loads sometimes before jquery
now np hope it helps others
i put this script at head but gave an error cant appendChild now its before
/body and checked works for all browsers i tryed script
async but it didn't have an event that tell me when the download ends
and some times bootstrap loaded before jquery and vise versa because
bootstrap depend on jquery i had to load jquery and then start
download bootstrap now i'll add fallback

fixed it

now it checks that jq loaded

and only then loads others

ok now its copy paste

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.