Get files into the DOM with Javascript

Question

To avoid the Google Pagespeed Messeger "Parsing Javascript later" I've copied this script.



<script type="text/javascript">
 function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "http://example.com/templates/name/javascript/jquery.js";
    document.body.appendChild(element);
    var element1 = document.createElement("script");
    element1.src = "http://example.com/templates/name/javascript/jquery.colorbox-min.js";
    document.body.appendChild(element1);
 }
 if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
 else 
    window.onload = downloadJSAtOnload;
</script>

How could I solve it with a loop because I need one more javascript file insert into the DOM.

Greets Ron

Basically, do you want to alter downloadJSAtOnload() to loop over an array of script names? — Mike
– Mike, Commented Apr 4, 2012 at 18:48

jfriend00 · Accepted Answer · 2012-04-04 21:34:45Z

1

You can make a function like this that takes an arbitrary number of script filenames:

function loadScriptFiles(/* pass any number of .js filenames here as arguments */) {
    var element;
    var head = document.getElementsByTagName("head")[0];
    for (var i = 0; i < arguments.length; i++) {
        element = document.createElement("script");
        element.type = "text/javascript";
        element.src = arguments[i];
        head.appendChild(element);
    }
}

function downloadJSAtOnload() {
    loadScriptFiles(
        "http://example.com/templates/name/javascript/jquery.js",
        "http://example.com/templates/name/javascript/jquery.colorbox-min.js",
        "http://example.com/templates/name/javascript/myJS.js"
    );
}

 if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
 else 
    window.onload = downloadJSAtOnload;

If your script files have a required load order (I presume colorbox must load after jQuery, for example), you will have to do something more sophisticated than this because this loads them all asynchronously so they have no guaranteed load order. Once you need a particular load order, it's probably best to get code that someone else has written to solve this problem like RequireJS or LABjs or Google.load().

Note: I'm also appending the script files to the <head> tag which is a bit better place to put them.

When using LABjs, you are not putting the .wait() in the right place. .wait() tells the loader to wait until all PRIOR scripts are loaded before loading the next one. I think you need it like this:

$LAB 
   .script("templates/name/javascript/jquery.js").wait()
   .script("templates/name/javascript/jquery.colorbox-min.js");

edited Apr 4, 2012 at 21:34

answered Apr 4, 2012 at 18:53

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1286819 Over a year ago

Many thanks for open up my eyes. Of course the solution with the script files in a loop is really crap. Now I tried to use LABjs. The website is very fast now, but the colorbox doesn't work.

jfriend00 Over a year ago

@user1286819 - I would guess you don't have the load order correct, but without seeing your specific code, I don't know what you might have wrong.

user1286819 Over a year ago

This is the code I use <script type="text/javascript"> $LAB .script("templates/name/javascript/jquery.js") .script("templates/name/javascript/jquery.colorbox-min.js").wait(); </script> - This should execute jquery.colorbox after loading jquery.

jfriend00 Over a year ago

@user1286819 - code really isn't readable in comments. I think you have the .wait() in the wrong place. See what I added to the end of my answer.

user1286819 Over a year ago

Before I've also tried your version and it didn't work. Now I've seen the script works fine in IE and Firefox but in Chrome the colorbox doesn't work. Even firebug for Chrome doesn't show any failures.

|

Collectives™ on Stack Overflow

Get files into the DOM with Javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related