I'm learning Javascript and I'm very confused as to why I'm having issues with my javascript loading before the html when using Chrome. When I use Firefox and Edge, the page loads with the html first and then I get an alert. When I use Chrome though, I get the alert first and the background is just blank. Everything I'v learned so far seems to say that the js script should run after the html because it's at the bottom of the body tag.
Thanks!
home.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hi, testing chrome.</h1>
<h2>Is this working?</h2>
<ul>
<li>list1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<script type="text/javascript" src="myjs.js"></script>
</body>
</html>
myjs.js page
alert("Am I working right?");
I'm learning Javascript and I'm very confused as to why I'm having issues with my javascript loading before the html when using Chrome. When I use Firefox and Edge, the page loads with the html first and then I get an alert. When I use Chrome though, I get the alert first and the background is just blank. Everything I'v learned so far seems to say that the js script should run after the html because it's at the bottom of the body tag.
Thanks!
home.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hi, testing chrome.</h1>
<h2>Is this working?</h2>
<ul>
<li>list1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
<script type="text/javascript" src="myjs.js"></script>
</body>
</html>
myjs.js page
alert("Am I working right?");
- 2 try adding your code in document ready method – mohit sharma Commented Nov 5, 2018 at 6:57
- 2 Possible duplicate of window.onload vs document.onload – Vahid Commented Nov 5, 2018 at 7:02
-
2
Note the html does load, you just blocked the render thread is all. By the looks of it Firefox and Edge decide to do a render cycle of the so far loaded DOM right before displaying the alert box, where as Chrome doesn't. It is just how each vendor decided to implement their particular code. You will still be able to get references to the loaded DOM elements like the
<ul>– Patrick Evans Commented Nov 5, 2018 at 7:12
7 Answers
Reset to default 2If you want to make your html load first before js make sure to wrap it with
document.addEventListener("DOMContentLoaded", function(event) {
// your code here
});
Since the JavaScript is single threaded, so when you call alert() function, it blocks other execution because it is an UI blocking function.
The web uses an event driven model to sequence actions. You are correct in assuming that if the script appears at the end of a document, it will be parsed later than if it appeared at the beginning. But the HTML spec does not specify explicitly that HTML has to be rendered before your script is executed. So parsing and rendering are different operations, and chrome may choose to execute the script as soon as it finishes parsing it.
So how can you sequence your actions correctly? The web in general and javascript in particular are event driven. Your code can listen to a variety of events and respond to them as you please. In this case, you want to execute your script after your document has loaded. Take a look at the DOMContentLoaded event.
Here's your code modified to run when the DOMContentLoaded event is fired.
document.addEventListener("DOMContentLoaded", function() {
alert("Am I working right?");
});
I have simply enclosed your alert function call in my event handler function.
An event handler function (or callback) must be registered on the element that emits the event, in our case, the document object. This is done by calling addEventListener() on that object with two arguments. The first is the event name that we want to listen to as a string, and the second is a function that must be executed when the event is fired.
There are many events defined for many different elements, and you can even define your own custom events and respond to them.
Place the code in Jquery document ready method
The function DOMContentLoaded let the browser execute a javascript code after the HTML content has loaded
document.addEventListener("DOMContentLoaded", function(event) {
/*it is verry easy now, you can write code here which will be executed when the
html content will end loading*/
});
Something you should always do in your JS files is put every direct code and DOM-related functions in a function to wait for the page to load.
In plain JavaScript :
window.onload = function() {
//Your JS here
};
Note that according to this post, you can use document.onload(function() {...});
With JQuery :
$(function() {
//Your JS here
});
In plain JavaScript, try this in myjs.js
$(window).on("load", function(){
var ss = document.createElement("script");
ss.src = "myjs.js";
ss.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(ss);
});
ELSE
Try this if jQuery is loaded.
$(function() {
alert("Am I wrong?");
});
You will need to add
<script src="https://cdn.jsdelivr/jquery/latest/jquery.min.js">
in the tag to include jQuery
This should make sure that the page is loaded. But please be informed that tag is also a part of the DOM
If the requirement is to execute the external JS after loading HTML, then you can try this.
$(function() {
var ss = document.createElement("script");
ss.src = "myjs.js";
ss.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(ss);
});