Question

5

document.createElement('script')... adding two scripts with one callback

rated 0 times [ 7] [ 2] / answers: 1 / hits: 33860 / 15 Years ago, tue, december 8, 2009, 12:00:00

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 = http://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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 15 Years ago chauncey · Accepted Answer

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([

   http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js,

   http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js

],function(){

    alert('All things are loaded');

});

Hope this will help