By Vishal Basumatary in javascript — Mar 25, 2023

how to set javascript load order in html

How to Set JavaScript Load Order in HTML

As a web developer, I have come across the need to set the JavaScript load order in HTML multiple times. It can be frustrating when your code is not working as expected due to the incorrect load order of your JavaScript files. In this blog post, I will explain how to set JavaScript load order in HTML and provide multiple ways to achieve this.

Method 1: Using the 'defer' Attribute

The easiest way to set JavaScript load order is by using the 'defer' attribute. The 'defer' attribute tells the browser to download the script file in the background and execute it after the HTML page has finished parsing. This ensures that your JavaScript code is executed after your HTML has been fully loaded.

To use the 'defer' attribute, simply add it to the script tag like this:

Make sure to add the 'defer' attribute to all your script tags that you want to load after the HTML has been fully loaded.

Method 2: Using the 'async' Attribute

The 'async' attribute is another way to set JavaScript load order. The 'async' attribute tells the browser to download the script file in the background and execute it as soon as it has finished downloading. This means that your JavaScript code could be executed before your HTML has been fully loaded.

To use the 'async' attribute, simply add it to the script tag like this:

Make sure to add the 'async' attribute to all your script tags that you want to load asynchronously.

Method 3: Using the 'defer' Attribute with Multiple Scripts

If you have multiple JavaScript files that need to be loaded in a specific order, you can use the 'defer' attribute with multiple script tags. This ensures that your JavaScript code is executed in the correct order.

To use the 'defer' attribute with multiple scripts, simply add the 'defer' attribute to all your script tags and make sure to add them in the correct order like this:

Make sure to add the 'defer' attribute to all your script tags that you want to load after the HTML has been fully loaded and add them in the correct order.

Method 4: Using JavaScript to Load Scripts

You can also use JavaScript to load your scripts dynamically in the correct order. This is useful if you have a large number of scripts or if you want to load scripts based on user interactions.

To load scripts dynamically using JavaScript, use the following code:


var script1 = document.createElement('script');
script1.src = 'first-script-file.js';
document.head.appendChild(script1);

var script2 = document.createElement('script');
script2.src = 'second-script-file.js';
document.head.appendChild(script2);

var script3 = document.createElement('script');
script3.src = 'third-script-file.js';
document.head.appendChild(script3);

This code creates a new script element for each script file and sets its source to the correct file. The script element is then appended to the head of the HTML document using the 'appendChild' method. This ensures that your JavaScript code is executed in the correct order.

Conclusion

Setting JavaScript load order in HTML is essential for ensuring that your code works as expected. Using the 'defer' and 'async' attributes are the easiest ways to achieve this. If you have multiple scripts that need to be loaded in a specific order, use the 'defer' attribute with multiple script tags or use JavaScript to load your scripts dynamically.