function fails to load a script

Question

I am using the following function to load scripts into a HTML file,

function addScript(src){
 var script = document.createElement('script');
 var location = "javascripts/";
 src =location + src;
 script.setAttribute('src', src);
 document.body.appendChild(script);
};

addScript('george.js');
addScript('fred.js');
addScript('main.js')

However, it seems to be able to load files which are too big (as in 200 lines). For example, if george.js has a class George, and the file is too long, attempts to create a new George() would fail.

I am convinced that it is a loading size problem because of the following:

1) new George would still fail if I comment out almost everything out from george.js.

2) new George would succeed if I delete any 10 functions from george.js.

3) new George would succeed if I split it up into 2 files

4). new Fred would fail if I add a lot of comments in fred.js.

5)To be clear, george.js can be

function George(){};

and I could call:

var george = new George();

in my file. However, if george.js becomes

function George(){};

/* 
(Insert hundreds of lines of comments here)
*/

the code

var george = new George();

will cause

ReferenceError: George is not defined

Why does this function have trouble loading a file of roughly 200 lines? And what can I do to deal with the problem?

Edit:

Attempt to try the window.setTimeout function.

AfterTimeout = function(){
  var george = new George();
}


window.setTimeout(AfterTimeout , 3000);

This does indeed seem to work.

I have ultimately made it work by setting script.async = false;.

Also, no errors other than "The character encoding of the HTML document was not declared. " and "Reference Error: Fred is not defined" — Fluidized Pigeon Reactor
– Fluidized Pigeon Reactor, Commented Dec 19, 2016 at 3:13
My guess is because loading in a JavaScript file takes time, you will want to use the functions only when that file has completely loaded. Try running this in a setTimeout of a few seconds and see if that's what's causing the issue. — Spencer Wieczorek
– Spencer Wieczorek, Commented Dec 19, 2016 at 3:36

derp · Accepted Answer · 2016-12-19 04:35:26Z

Its a bit hard to see what the error is without seeing the contents of fred or george but I can think of two things that might be causing your errors:

1) If you are accessing DOM elements (e.g. elements in the html), you will need to wait until the HTML elements have finished loading. You can do this by wrapping your code within a DOMContentLoaded callback

e.g

document.addEventListener("DOMContentLoaded", function() {
  function addScript(src){
    var script = document.createElement('script');
    var location = "javascripts/";
    src =location + src;
    script.setAttribute('src', src);
    document.body.appendChild(script);
  };

  addScript('george.js');
  addScript('fred.js');
  addScript('main.js')
});

2) The second thing you need to aware of is that if you dynamically add scripts like it might be async in nature. If you need the scripts to be sequentially called due to dependencies, you can try setting the async attribute to false

e.g.

script.setAttribute('async', false);

Community · Accepted Answer · 2017-05-23 11:46:13Z

by creating DOM elements yourself and appending them to your document, you're attempting to load Javascript files asynchronously. if george.js finishes loading before var george = new George(); is called, then you got lucky this time and you won't have any problems. but if george.js is really big, or is being fetched over a slow network connection, then there's a good chance it won't be loaded and ready before you try to create a new George in your code.

the quickest way to load scripts, and to invoke a callback when the script is guaranteed to be loaded, is probably to use jQuery's getScript() function. the right way is probably to use something like webpack or browserify to properly identify and handle all dependencies between the different source files you write.

here is a pretty great answer discussing the details.

Will getScript work if the script is on a different server?
I believe you are correct. I should probably be using one of those. Do you have a recommendation for which one?

takid1412 · Accepted Answer · 2016-12-19 04:59:12Z

You must waiting script fully load to use its code. Catch event onload on script then execute. Use something like this:

var writeScripts = function (scripts, callback) {
    if(scripts.length==0) callback && callback();
    var src = scripts.shift();
    var s = document.createElement('script');
    s.type = "text/javascript";
    s.src = src;
    if(s.addEventListener) {
        s.addEventListener('load', function (e) { writeScripts(scripts, callback); }, false);
    } else if(s.attachEvent) {
        s.attachEvent('load', function (e) { writeScripts(scripts, callback); });
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(s);
}
writeScripts(['george.js','fred.js', 'main.js'], function(){
    var george = new George();
});

This script load sequentially like browser, if you want it load parallel, just make a loop and add a count variable to handle.

Collectives™ on Stack Overflow

function fails to load a script

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related