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
5 answers
solution1
1 2017-08-04 09:43:40
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.
solution2
1 2020-04-23 08:51:42
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.
solution3
0 2018-08-30 16:38:19
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!!
solution4
0 2018-09-02 11:24:54
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.
solution5
0 2018-12-12 08:07:31
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.