Unleash JavaScript's Power: Master the Latest Features & Frameworks
JavaScript isn’t just for basic interactions anymore! Level up your skills with the newest features and frameworks to build cutting-edge web applications. Code Like a JavaScript Pro
Sign Up Now!
In this tutorial you will learn How to make JavaScript load after HTML, If you are a beginner in JavaScript, you might know that loading JavaScript in the head tag is not a good idea. So, it’s always recommended to run JavaScript after HTML is loaded, Now the question is how to make JavaScript load after HTML.
The whole idea of loading JavaScript in the footer is to make sure that your website loads faster So that your website can perform better on all devices. There are multiple ways how you can get this.
First, Let’s see how render-blocking works. Let’s create an HTML file called before.html and load the JavaScript inside the head tag. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
alert('Hello, World!');
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Now, if you run this in your browser, for example, am using Firefox, and here is the result:
Here, you can see that the alert("Hello, World!"); is loaded before even the HTML h1 tag is loaded.
Now let’s try loading JavaScript after HTML is loaded, for this example, we will create a file called after.html and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
alert('Bye, World!');
</script>
</body>
</html>Now, if you run this code, you will see the following window:
Here, you can see, that the HTML h1 tag is loaded first. So, this confirms the loading of JavaScript after HTML is loaded.
So, it is recommended that you call JavaScript after the page load is complete. In simple, make sure to place JavaScript right before the closing tag of the body </body>
Another way, How to make JavaScript load after HTML is by using the defer attribute. for example, you can specify your code as:
<script src="custom.js" defer></script>This will help to load JavaScript after the HTML is loaded, or you can try adding <body onload="script();"> in your body tag as shown in the code.
Other ways also include specifying the function:
document.onload = function ...or
window.onload = function ...This will also help in loading JavaScript after the HTML is loaded.
These solutions were inspired by Stackoverflow
Hope this helps.
Unleash JavaScript's Power: Master the Latest Features & Frameworks
JavaScript isn’t just for basic interactions anymore! Level up your skills with the newest features and frameworks to build cutting-edge web applications. Code Like a JavaScript Pro
Sign Up Now!
Unleash JavaScript's Power: Master the Latest Features & Frameworks
JavaScript isn’t just for basic interactions anymore! Level up your skills with the newest features and frameworks to build cutting-edge web applications. Code Like a JavaScript Pro
Sign Up Now!
Leave a Reply