Google Chrome loads the javascript first even I put the script tag before the end of the body tag

Question

I have a problem with loading JavaScript in Google Chrome.
I've created the separate js file with a simple alert message and then linked it before the end of the body tag.
Google Chrome shows the alert box first then when I click 'ok' the content is loaded.
In other browsers it works fine, I mean the alert box shows at the same time as the content of the web page.
In short, Google Chrome loads the javascript first even when I put the script tag before the end of the body tag.

alert("Hello World!");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Write Your First Program</title>
    <!-- Bootstrap Core CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
     <link href="css/styles.css" rel="stylesheet">

</head>
<body>
    <!-- Header -->
     <header class="header">
        <div class="text-vertical-center">
            <h1>Write Your First Program</h1>
            <h3>JavaScript Essentials</h3>
            <br>
        </div>
    </header>

<script src="js/scripts.js"></script>
</body>
</html>

Do you have any idea how to fix this problem? Thanks a lot

Not for me, I use Chrome and I can see the text then the alert box, using your snippet. — Jeremy Thille, Aug 04 '17 at 09:40
Me too... Your script is at the right place so that the HTML content will load first then your script is called. What's your Chrome version ? What are extensions or plugins installed ? — Jean-Luc Aubert, Aug 04 '17 at 09:42
Hey Jean, I use the latest version of Google Chrome( 60.0.3112.90), and I disabled all extensions. — Will Good, Aug 04 '17 at 09:47
How about running your Stack Snippet? Does it behave the same way, or does this happen only on your real page? — Teemu, Aug 04 '17 at 09:51
Hmm... I actually could reproduce this at jsfiddle. Is the code in the post your real code, or are you having iframes? — Teemu, Aug 04 '17 at 10:07
Does this answer your question? [Browsers react differently to — shivamag00, Apr 23 '20 at 09:05

Louis 'LYRO' Dupont · Answer 1 · 2017-08-04T10:04:43.987

1

Your problem is that your script have the tag async, which let it execute whitout taking care of the web page loading state. Remove the async tag, or replace it with defer, which execute the script after the page loading.

In order to prevent any problem with script and html/css loading times conflict, you should encapsulate your Javascript's scripts with window.onload = function() { //code here }. This will guarantee that your whole page is loaded before executing your code.

edited Aug 04 '17 at 10:04

answered Aug 04 '17 at 09:43

Louis 'LYRO' Dupont

1,052
4
15
35

Thanks Louis for reply and advice. But I need to figure out why my browser Google Chrome loads the alert box first even when it shouldn't :) – Will Good Aug 04 '17 at 09:54
Your issue is strange since I have exactly the same setup as you and it works perfectly. Did you clear the cache ? – Louis 'LYRO' Dupont Aug 04 '17 at 09:57
just edited my answer, take a look @WillGood. You should add the async tag in your question, so that future people will understand why I gave you this answer, since image linked will be removed on the host website. – Louis 'LYRO' Dupont Aug 04 '17 at 10:04
Did you clear the cache after removing the async tag ? – Louis 'LYRO' Dupont Aug 04 '17 at 10:10
By the way couple of people have the same issue as I and they also don't know why :) – Will Good Aug 04 '17 at 10:11
1

Btw I wrapped the code in window.onload and it works fine but it shouldn't behave like that even without window.onload – Will Good Aug 04 '17 at 10:32
i have the same problem any fix yet? – Kanishk Tanwar Jul 20 '18 at 17:22
You should wrapp your code in window.onload. Search about this method, it is the most common and simple way. – Louis 'LYRO' Dupont Jul 21 '18 at 09:57

score 1 · Answer 2 · answered Apr 23 '20 at 08:51

That is a problem with Chrome. The developers of chrome for some reason have still not corrected that. If you have alert or a prompt pop-up, which is the first thing that user has to interact with in your website, chrome will not load HTML until after the pop-up has been closed.

score 0 · Answer 3 · edited Aug 30 '18 at 17:22

0

Try including jquery cdn just above your script tag in body.

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous">
</script>

This will work fine!!

edited Aug 30 '18 at 17:22

Sunil Sharma

2,653
1
25
36

answered Aug 30 '18 at 16:38

Vinukartik Pillai

1

score 0 · Answer 4 · answered Sep 02 '18 at 11:24

0

I also had this problem and realized that my Google chrome was just loading the cached version of page(the one before putting my script tag near bottom). Closing the window and reopening the page worked fine.

answered Sep 02 '18 at 11:24

Dushyant Singh

1
1

score 0 · Answer 5 · edited Dec 12 '18 at 10:02

async and defer boolean attributes are only helpful when the script is inserted in the head portion of the page. They are useless if you put the script in the body footer like we saw above.

(Refer following article: https://flaviocopes.com/javascript-async-defer/).

I am also facing similar issue and using window.onload = funcRef; with cleared cache also does not work on my google chrome. I have tried all of this with disabling all my browser extensions but in vain.

I was finally able to, not solve, but agree upon a way around - which was - to include a

jQuery CDN

before my javascript script in the body. Hope this helps.

Google Chrome loads the javascript first even I put the script tag before the end of the body tag

5 Answers5

Linked