Chrome: JS loads before HTML

user_10583241 0
Viewed 4629

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?");
google-chrome html javascript
7 Answers

Since the JavaScript is single threaded, so when you call alert() function, it blocks other execution because it is an UI blocking function.

user_68322010

If you want to make your html load first before js make sure to wrap it with 

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code here
});
user_36548370

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.

user_16565030

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
});
user_99503780

Place the code in Jquery document ready method

user_91674840

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.net/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);
});
user_36829680

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*/
  });
user_63205510
Related