Delay callback until script is added to document?

问题:

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();     } } 

回答1:

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.

回答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); 

回答3:

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'); }); 

回答4:

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

文章来源: Delay callback until script is added to document?