How to defer loading of JavaScript file?

Question

I don't want to call the JavaScript functions at the startup. The reason is simple, it will reduce the initial download size and the page will be appear faster. To do that I used the following code inside head section..

<script type="text/javascript">
 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

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

But it did not work...please help me

Related: stackoverflow.com/questions/912711/…

masoud
– masoud

2015-04-11 11:03:22 +00:00
Commented Apr 11, 2015 at 11:03 — masoud
– masoud, Commented Apr 11, 2015 at 11:03

timw4mail · Accepted Answer · 2011-07-07 13:53:35Z

4

Usually, it's better to put scripts in the end of your body, and call them immediately.

Scripts block loading of the page, so putting them at the end of body allows the page to load quickly, and the javascript will load with page already ready.

answered Jul 7, 2011 at 13:53

timw4mail

1,7862 gold badges13 silver badges16 bronze badges

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

2 Comments

katspaugh Over a year ago

Some even suggest adding another head element after the body element and put scripts into the former. Is it good practice?

timw4mail Over a year ago

@katspaugh I would avoid adding a second head, since it is not standard, and has no benifit.

Senad Meškin · Accepted Answer · 2011-07-07 13:51:59Z

1

document.head.appendChild(element)

answered Jul 7, 2011 at 13:51

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

Comments

GibboK · Accepted Answer · 2016-08-04 11:53:14Z

1

You can use <script defer> (defer attribute on HTML script tag).

Example:

<script src="link/to/yourfile.js" defer></script>

defer will download the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guaranteed to execute in the order that they appear in the document.

answered Aug 4, 2016 at 11:53

GibboK

74.2k149 gold badges453 silver badges676 bronze badges

Collectives™ on Stack Overflow

How to defer loading of JavaScript file?

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