Delay callback until script is added to document?

Question

How can I get the callback to not run until the script is actually appended to the document?

function addScript(filepath, callback){
    if (filepath) {
        var fileref = document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filepath);
        if (typeof fileref!="undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref);
    }
    if (callback) {
        callback();
    }
}

score 14 · Accepted Answer · edited May 23 '17 at 12:01

In the ideal world, you could use the onload property of the <script /> tag;

function addScript(filepath, callback){
    if (filepath) {
        var fileref = document.createElement('script');

        fileref.onload = callback;

        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filepath);

        if (typeof fileref!="undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref);
    }
}

However, this doesn't work in IE, so mega-h4x are required;

  function addScript(filepath, callback) {
      if (filepath) {
          var fileref = document.createElement('script');
          var done = false;
          var head = document.getElementsByTagName("head")[0];

          fileref.onload = fileref.onreadystatechange = function () {
              if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
                  done = true;

                  callback();

                  // Handle memory leak in IE
                  fileref.onload = fileref.onreadystatechange = null;
                  if (head && fileref.parentNode) {
                      head.removeChild(fileref);
                  }
              }
          };

          fileref.setAttribute("type", "text/javascript");
          fileref.setAttribute("src", filepath);

          head.appendChild(fileref);
      }
  }

FWIW, your if (typeof fileref != "undefined") was redundant, as it will always evaluate to true, so you can just do head.appendChild(fileref); directly, as in my example.

score 2 · Answer 2 · answered May 24 '13 at 21:25

2

what about:

var myParticularCallback = function () {
    // do something neat ...
}

..... your code  

var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");

fileref.onload = myParticularCallback;

if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref);

 // after all has set, laod the script and wait for onload event:
fileref.setAttribute("src", filepath);

answered May 24 '13 at 21:25

Axel Amthor

10,980
1
25
44

Really like the solution to use fileref.onload = myParticularCallback – Peter I Feb 27 '18 at 11:39

score 1 · Answer 3 · answered May 24 '13 at 21:21

1

This tiny script / css loader will do the job https://github.com/rgrove/lazyload/

LazyLoad.js('/foo.js', function () {
  alert('foo.js has been loaded');
});

answered May 24 '13 at 21:21

Fergal

2,484
2
36
48

score -1 · Answer 4 · answered May 24 '13 at 21:20

-1

Easiest way will be define some visible callback() function which will run in your dynamicly included script, at the end.

answered May 24 '13 at 21:20

IProblemFactory

9,551
8
50
66

1

I cannot touch the dynamically included script. – dezman May 24 '13 at 21:21

Delay callback until script is added to document?

4 Answers4

Linked