CODEWITHSUNDEEP
javascriptjqueryhtml
user2654186
user2654186

Reputation: 195

How to be sure an external JS code is loading as the first

I have a website which is using big JS data stores in an external JS file. The problem is my website sometimes works and sometimes doesn't :/

Source code basically looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="data.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
// All HTML code is here //
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) { 
//Another JS code to display data
}
</script>   
</body>
</html>

Probably the data file "data.js" is too big and sometimes it is loading to slow and another code loads before this data. I assume that cause sometimes after run the website everything works perfect, but sometimes I have errors in the console like "missing ] after element" or "variable1FromDataJS is not defined" but I'm sure in this code everything is correct! How can I be sure that my external file data.js will be loading as the first? (In the JS code inside of I'm using document.addEventListener("DOMContentLoaded", function(event) { }

Or maybe you think the cause of a problem is something diffrent?

Upvotes: 0

Views: 169

Answers (1)

jfriend00
jfriend00

Reputation: 707198

"missing ] after element" and "variable1FromDataJS is not defined" are indications that you have script errors that are causing portions of your Javascript to abort execution and thus some variables and data is not defined like you expect.

You need to find and fix those script errors and only proceed when you have a completely clear console that is reporting no errors. All errors in your console should be fully understood and fixed.

Now that you have let us look at the actual site, when I look at the Network tab in the Chrome browser, I see that the download of the data.js file fails sometimes with this error in Chrome net::ERR_CONTENT_LENGTH_MISMATCH. It gets part or most of the way through the download, but does not complete successfully. Depending upon exactly where it fails, you get a different script error. I can see no reason why this would be a client-side error. I think this is something wrong in the way your server is serving up data.js. I don't know if it isn't correctly finished the request or if you have a concurrency issue in your server or if there's just a programming error in creating data.js, but I think you need to fix this on the server.

I see this in the Chrome log when it fails:

GET http://maps.890m.com/data.js net::ERR_CONTENT_LENGTH_MISMATCH

<script> elements that are in the original HTML of your page and are not marked with the defer or async attributes will execute in the order they are encountered in the web page. The second <script> tag will not execute before the first one has loaded and executed. If the first script throws an exception either upon parsing or upon execution, then it will be aborted and the next script in line will execute when ready. But, because the first script aborted, things that you expected that first script to do will not have been done.

But, the upshot of this sequential execution of script tags is that you don't have to worry about timing if data.js is large. It will still load and execute before any <script> tags that come after it are executed.

Upvotes: 2

Related Questions