Async Script Loader with Callback

Last updated on:
var Loader = function () { }
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
    loaded: function (evt) {

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function');
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); }, false);
        var head = document.getElementsByTagName('head')[0];


var l = new Loader();
    function() {
        // Callback
        console.log('All Scripts Loaded');

Reference URL


  1. Mufeed Ahmad
    Permalink to comment#

    i request you to provide these code with demo… will help us a lot..

    thank you for your help.

  2. Jerome Covington
    Permalink to comment#

    Thanks I just borrowed the writeScript method and trimmed it down a bit. Surprising how many times I do async loading and always forget the exact way to create the script element etc. Thanks!

  3. Michiel Van Laere
    Permalink to comment#

    Maybe good to mention that “addEventListener” is not supported in IE8 or lower.
    They use “attachEvent”. You can support IE like this:

    if(s.addEventListener) {
    s.addEventListener(‘load’, function (e) { self.loaded(e); }, false);
    } else if(s.attachEvent) {
    s.attachEvent(‘load’, function (e) { self.loaded(e); }

    Or if you are using jQuery you can use:

    jQuery(s).load(function(e) { self.loaded(e); });


    • jockchou
      Permalink to comment#

      But script tag have not ‘load’ event. you should use ‘onreadystatechange’ to listene the scripts load.
      if (s.addEventListener) {
      s.addEventListner(‘load’, function(e) {
      //callback here
      }, false);
      } else {
      s.onreadystatechange = function() {
      if (s.readyState in {loaded: 1, complete: 1}) {
      //callback here

      //some code

      function loadScript(url, callback){
      var script = document.createElement(“script”);
      script.type = “text/javascript”;
      script.charset = “utf8”;
      if (script.readyState) {//IE
      script.onreadystatechange = function() {
      if (script.readyState == ‘loaded’ || script.readyState == ‘complete’) {
      script.onreadystatechange = null;
      if (typeof callback === ‘function’) {
      } else {//other browers
      script.onload = function() {
      script.onload = null;
      if (typeof callback === ‘function’) {
      script.src = url;

  4. David Vespoli
    Permalink to comment#

    @jockchou : your comment about using onreadystatechange instead as the trigger for the callback helped me get this working in IE8. Thanks!

  5. Daniel Bammer
    Permalink to comment#

    This snippet didn’t really work out for me but jQuery.getScript() workes like a charm!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed