The setAttribute ensures consistency, especially when setting boolean attributes (like async). It’s also helpful for cross-browser compatibility.
Key Takeaways
Dynamic file/script loading in JavaScript reduces initial page load time. It ensures that only essential resources are loaded up front, improving First Contentful Paint (FCP) and Time to Interactive (TTI).
Scripts are loaded asynchronously or on-demand to keep the page responsive and prevent blocking the DOM rendering, enhancing user experience.
Using promises ensures sequential loading, preventing dependency issues when scripts rely on each other.
Dynamic JavaScript file loading refers to the process of adding scripts to the document at runtime. Instead of including all scripts in the HTML file, you can load specific scripts only when they are needed. This technique improves performance, reduces page load time, and optimizes resource usage.
If you know exactly which JavaScript file to load, typically, you would use the script tag:
<script src="https://www.educative.io/test.js"></script>
Suppose you have a use case where you are unaware of the script file you want to load when your page loads. Now, if you have a hard-coded script element, then the code will not work as expected. Here, we would need to load the file dynamically. There are multiple methods to load a file dynamically in JavaScript. Below, we will examine each method with examples.
The simplest way to dynamically load a JS file is using the <script> element as follows:
function loadScript(file) {const newScript = document.createElement('script');newScript.setAttribute('src', file);newScript.setAttribute('type', 'text/javascript');newScript.setAttribute('async', 'true');newScript.onload = () => console.log(`${file} loaded successfully.`);newScript.onerror = () => console.error(`Error loading script: ${file}`);document.head.appendChild(newScript);}
Line 2: We create a new <script> element and store its reference in the newScript .
Line 3: We set the src attribute to point to the JavaScript file you want to load.
Line 4: We specify the script type. It is optional in modern browsers.
Line 5: We ensure the script loads asynchronously (doesn’t block rendering).
Line 7: We define the onload() callback function that fires when the script is successfully loaded.
Line 8: We define the onerror() callback function that handles errors if the script fails to load.
Line 10: We append the script to the document’s <head> section, triggering file load during page initialization.
Let's look at a complete working example.
In the load-script.js file above, we define a loadScript() function that creates a <script> element and sets the src attribute to the target file. The onload() and onerror() handlers display success or error messages inside the HTML. The displayMessage() function updates the content of the #message <div> to show success or error messages. Finally, we attach an event listener to the button, triggering the loading of the file.js file when clicked.
Learn more about JavaScript file loading with hands-on practice with, Build a Microblogging App Using PHP, HTML, JavaScript, and CSS project.
When we need to ensure sequential script loading, we can use JavaScript promises. This is useful when one script depends on another being fully loaded, and it also avoids race conditions when scripts depend on each other.
function loadScriptSequentially(file) {return new Promise((resolve, reject) => {const newScript = document.createElement('script');newScript.setAttribute('src', file);newScript.setAttribute('type', 'text/javascript');newScript.setAttribute('async', 'true');newScript.onload = () => {console.log(`${file} loaded successfully.`);resolve();};newScript.onerror = () => {console.error(`Error loading script: ${file}`);reject(new Error(`Failed to load: ${file}`));};document.head.appendChild(newScript);});}
Line 2: The loadScriptSequentially() function returns a new Promise object, which allows us to handle asynchronous behavior. If the script loads successfully, the resolve function will be called, and if it fails, reject will be triggered.
Lines 8-10: We define the onload() callback function, which will run when the script loads successfully. We log a message to the console indicating that the script was loaded successfully. Finally, we call the resolve() function to indicate that the promise has been successfully completed.
Lines 13-15: We define an onerror() callback to handle errors that occur while loading the script. If the script fails to load, we log an error message to the console. We call reject() with a new Error object to signal that the promise has failed.
Practice JavaScript core concepts by attempting this project, Web Crawling in JavaScript Using Cheerio.
Let's look at a complete working example.
In the load-script.js file above, we define a loadScriptSequentially() function that creates a <script> element, sets its src to a local JS file and returns a promise to ensure sequential loading. We also create a helper function displayMessage() that updates the content of the message area with a success or error message. Finally, when the button is clicked, it triggers the sequential loading of two local JS files—sample_file1.js and sample_file2.js.
Haven’t found what you were looking for? Contact Us