CODEWITHSUNDEEP
javascript
Sajib Shome
Sajib Shome

Reputation: 11

How to defer loading of JavaScript file?

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

Upvotes: 1

Views: 5213

Answers (3)

GibboK
GibboK

Reputation: 73988

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.

Upvotes: 1

timw4mail
timw4mail

Reputation: 1776

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.

Upvotes: 4

Senad Meškin
Senad Meškin

Reputation: 13756

document.head.appendChild(element)

Upvotes: 1

Related Questions