Get files into the DOM with Javascript - 【StackMirror】|javascript

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

javascript

2012-04-04 18:39
by user1286819

http://requirejs.org - samccone 2012-04-04 18:43

Basically, do you want to alter downloadJSAtOnload() to loop over an array of script names - Mike 2012-04-04 18:48

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");

2012-04-04 18:53
by jfriend00

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 - user1286819 2012-04-04 21:01

@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 - jfriend00 2012-04-04 21:10

This is the code I use - This should execute jquery.colorbox after loading jquery - user1286819 2012-04-04 21:22

@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 - jfriend00 2012-04-04 21:35

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 - user1286819 2012-04-04 21:39

@user1286819 - I don't know the details of LABjs. Their doc says it should work for dynamically loading jQuery as long as the version is 1.4 or higher. The only other disclaimers I found were that the libraries can't do document.write(). If it really won't work for you, then you may need to find where LABjs questions are handled more specifically - jfriend00 2012-04-04 21:54