Load external javascript file after onload()

Question

I use this in the head tag:

<script src="js/lightbox.js"></script>

Is it possible to remove this off the header and load this file with onload()?

<body onload="...">...</body>

Note: This is not a function, it's an external js file with several functions.

Thanks!

just add "Async" and "defer" attribute to your JS tag Eg: "<script src="js/lightbox.js" defer async="async"></script>" this will load when ever you call a function inside it. — NiRUS
– NiRUS, Commented Feb 13, 2014 at 18:08

Vinay Pratap Singh Bhadauria · Accepted Answer · 2014-02-13 18:03:26Z

4

<script>
function loadJS(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.async = true;
    s.onreadystatechange = s.onload = function() {
        var state = s.readyState;
        if (!callback.done && (!state || /loaded|complete/.test(state))) {
            callback.done = true;
            callback();
        }
    };
    document.getElementsByTagName('head')[0].appendChild(s);
}
loadJS('/script/script.js', function() { 
    // put your code here to run after script is loaded
});
</script>

I still think its better to load in jQuery and use $.getScript instead as you have lots of goodies there.

Can call this on body load

answered Feb 13, 2014 at 18:03

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

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

Comments

AtanuCSE · Accepted Answer · 2014-02-13 18:01:47Z

2

onload="blabla();"

function blabla()
{
    $.getScript( 'url to your js file', function( data, textStatus, jqxhr ) {
        // do some stuff after script is loaded
    });
}

You can learn more here

Source

answered Feb 13, 2014 at 18:01

AtanuCSE

8,95016 gold badges80 silver badges115 bronze badges

Comments

Fizk · Accepted Answer · 2014-02-13 18:05:34Z

2

If you want to do it without jQuery, use this

function addScript(filename)
{
 var scriptBlock=document.createElement('script')
 scriptBlock.setAttribute("type","text/javascript")
 scriptBlock.setAttribute("src", filename)
 document.getElementsByTagName("head")[0].appendChild(scriptBlock)
}

and call it with <body onload="addScript('myFile.js')". If you have multiple files to load, you could put in a wrapper, that adds all the files you want.

answered Feb 13, 2014 at 18:05

Fizk

1,1141 gold badge8 silver badges22 bronze badges

Comments

Mahesh · Accepted Answer · 2014-02-13 18:09:14Z

1

Use $(document).ready() and from this function load javascript. It sounds crazy but can be done. please follow http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

answered Feb 13, 2014 at 18:09

Mahesh

1,0329 silver badges22 bronze badges

Comments

lshettyl · Accepted Answer · 2014-02-13 18:07:04Z

0


var JS = {
  load: function(src, callback) {
    var script = document.createElement('script'),
        loaded;
    script.setAttribute('src', src);
    if (callback) {
      script.onreadystatechange = script.onload = function() {
        if (!loaded) {
          callback();
        }
        loaded = true;
      };
    }
    document.getElementsByTagName('head')[0].appendChild(script);
  }
};

// Example with callback

JS.load("http://www.someawesomedomain.com/some.js", function() {
    //Do your thing.
});

answered Feb 13, 2014 at 18:07

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Load external javascript file after onload()

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related