JS files async loading in the right way. How to?

Question

I have couple of CDN files what I call in header

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

and after all my js files what are depending on this libraries, but google's page speed complains that those scripts are blockers on page load. So I tried to put everything before body closing but in this case I will have all scripts broken because they depend on jquery.

I tried to use defer but like that the same problem as in footer. How do I load async javascript libraries to not break the hole?

there must be something else wrong, jquery wouldn't break

towc
– towc

2016-06-07 12:39:55 +00:00
Commented Jun 7, 2016 at 12:39 — towc
– towc, Commented Jun 7, 2016 at 12:39
could you please share the console logs as well?

Nitesh Goyal
– Nitesh Goyal

2016-06-07 12:40:26 +00:00
Commented Jun 7, 2016 at 12:40 — Nitesh Goyal
– Nitesh Goyal, Commented Jun 7, 2016 at 12:40

shershen · Accepted Answer · 2016-06-07 12:39:49Z

2

General solution is to use async module load like RequireJS. Here's a jQuery integration case: http://requirejs.org/docs/jquery.html

Considering "but in this case I will have all scripts broken because they depend on jquery." you could add check in your JS code like:

$(document).ready(function(){
  //your jQuery-based code
})


//if jQuery loading failed
if(!window.jQuery){

}

answered Jun 7, 2016 at 12:39

shershen

10k11 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fefe Over a year ago

there are a lot of scripts included I just want to optimize the page load not to refactor the hole code

shershen Over a year ago

i've listed to ways - refactor with AMD or quick patch with !window.jQuery.

Community · Accepted Answer · 2017-05-23 10:27:47Z

0

You might want to have a look at the number of files from the same host. Look at this.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Jun 7, 2016 at 12:42

EinarI

6671 gold badge9 silver badges15 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:34:08Z

0

What you would like to achieve is AMD (Asynchronous Module Definition)

Asynchronous module definition (AMD) is a JavaScript specification that defines an API for defining code modules and their dependencies, and loading them asynchronously if desired. Read more: https://en.wikipedia.org/wiki/Asynchronous_module_definition

There are a bunch of frameworks for that:

RequireJS - http://requirejs.org
Dojo Toolkit - https://dojotoolkit.org

Or you can load JS files manually, using this method (not recommended): https://stackoverflow.com/a/7719185/1502230

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Jun 7, 2016 at 12:47

Andras Szell

5272 silver badges13 bronze badges

Collectives™ on Stack Overflow

JS files async loading in the right way. How to?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related