By user199085


2009-12-08 12:42:50 8 Comments

I need to add prototype and then add scriptaculous and get a callback when they are both done loading. I am currently loading prototype like so:

var script = document.createElement("script");
script.src = "//ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js";
script.onload = script.onreadystatechange = callback;
document.body.appendChild( script );

I could do this by chaining the callbacks, but that seems like poor practice ( I don't want a silly chain of 20 callback methods when I need to load more scripts). Ideas?

3 comments

@nemisj 2009-12-08 13:57:33

I propose you to use some small loader which will chain and do stuff for you. For example like this one:

function loadScripts(array,callback){
    var loader = function(src,handler){
        var script = document.createElement("script");
        script.src = src;
        script.onload = script.onreadystatechange = function(){
            script.onreadystatechange = script.onload = null;
            handler();
        }
        var head = document.getElementsByTagName("head")[0];
        (head || document.body).appendChild( script );
    };
    (function run(){
        if(array.length!=0){
            loader(array.shift(), run);
        }else{
            callback && callback();
        }
    })();
}

This script should help you to build the script tags and call your callback when all files are loaded. Invoke is pretty easy:

loadScripts([
   "//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js",
   "//ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"
],function(){
    alert('All things are loaded');
});

Hope this will help

@Alexander Mills 2015-04-08 03:59:54

aysnc.parallel or async.series might help with this github.com/caolan/async

@Gabriel Luethje 2016-08-25 14:04:46

arguments.callee throws an error in strict mode: From developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… "arguments.callee is no longer supported. In normal code arguments.callee refers to the enclosing function. This use case is weak: simply name the enclosing function! Moreover, arguments.callee substantially hinders optimizations like inlining functions, because it must be made possible to provide a reference to the un-inlined function if arguments.callee is accessed.

@nemisj 2016-09-13 15:14:56

@GabrielLuethje, changed it to named function

@SumNeuron 2017-05-09 17:28:32

Can you please verbosely document what you did there?

@jalilIrfan 2017-09-11 11:09:30

This solution was useful when using SinglePageApplication like Ember .

@gerteb 2011-04-28 03:15:08

Because of a bug in Internet Explorer the recursive loader program from nemisj is not working correct in IE. Can be solved by setting a delay on the recursive call like:


function loadScripts(array,callback){  
    var loader = function(src,handler){  
        var script = document.createElement("script");  
        script.src = src;  
        script.onload = script.onreadystatechange = function(){  
          script.onreadystatechange = script.onload = null;  
          if(/MSIE ([6-9]+\.\d+);/.test(navigator.userAgent))window.setTimeout(function(){handler();},8,this);  
          else handler();  
        }  
        var head = document.getElementsByTagName("head")[0];  
        (head || document.body).appendChild( script );  
    };  
    (function(){  
        if(array.length!=0){  
                loader(array.shift(),arguments.callee);  
        }else{  
                callback && callback();  
        }  
    })();  
}  

This small hack does it, and often is the solution in IE, when an unexplainable problem occurs, which is too often.

@Eric Bréchemier 2009-12-08 14:12:58

Since scriptaculous requires prototype, you will have to chain the listeners, with whatever method you use to load these scripts.

There are various script loaders available to load scripts in parallel, as fast as possible, e.g. LABjs, but none is going to help much in this scenario.

If you end up having 10-20 scripts to load, I would recommend combining the scripts beforehand, using a tool such as a Combiner.

@Kyle Simpson 2011-05-19 20:36:18

actually, this scenario is exactly what LABjs was designed to solve.

Related Questions

Sponsored Content

63 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

22 Answered Questions

[SOLVED] Generate random number between two numbers in JavaScript

  • 2011-02-10 16:41:22
  • Mirgorod
  • 1355055 View
  • 1675 Score
  • 22 Answer
  • Tags:   javascript random

12 Answered Questions

[SOLVED] Why don't self-closing script elements work?

36 Answered Questions

[SOLVED] Compare two dates with JavaScript

22 Answered Questions

[SOLVED] Where should I put <script> tags in HTML markup?

10 Answered Questions

[SOLVED] How to access the correct `this` inside a callback?

13 Answered Questions

[SOLVED] jQuery document.createElement equivalent?

1 Answered Questions

[SOLVED] HTML/JavaScript Script Injection Exception

1 Answered Questions

[SOLVED] Scriptaculous Ajax.Autocompleter loading bar

2 Answered Questions

[SOLVED] make an angular app with js bookmarklet

Sponsored Content