CODEWITHSUNDEEP
javascripthtmlgoogle-chrome
jmido8
jmido8

Reputation: 31

Chrome: JS loads before HTML

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?");

Upvotes: 3

Views: 5676

Answers (7)

Ropali Munshi
Ropali Munshi

Reputation: 3006

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

Upvotes: 2

Vimal Maheedharan
Vimal Maheedharan

Reputation: 755

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

Upvotes: 0

Jean-Marc Zimmer
Jean-Marc Zimmer

Reputation: 555

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

Upvotes: 0

Ananth
Ananth

Reputation: 889

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.

Upvotes: 1

Ir Calif
Ir Calif

Reputation: 478

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

Upvotes: 0

Sandeep
Sandeep

Reputation: 24

Place the code in Jquery document ready method

Upvotes: 0

Mukyuu
Mukyuu

Reputation: 6759

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

Upvotes: 2

Related Questions