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

Answer 1

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.

Answer 2

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.

Answer 3

document.head.appendChild(element)