Rückruf verzögern, bis Skript zum Dokument hinzugefügt wird?

Question

Wie kann ich den Rückruf nicht ausführen, bis das Skript tatsächlich an das Dokument angehängt ist?

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

Answer 1

In der idealen Welt die Arbeit tun, könnten Sie die onload Eigenschaft des <script /> Tag verwenden;

Jedoch this doesn't work in IE, so Mega-h4x sind erforderlich;

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, Ihre if (typeof fileref != "undefined") war überflüssig, da es immer zu wahr ausgewertet werden, so dass Sie nur head.appendChild(fileref); direkt tun können, wie in meinem Beispiel.

Answer 2

Der einfachste Weg, wird einige sichtbare callback() Funktion werden definieren, die in ihrem dynamicly laufen Skript enthalten ist, am Ende.

Answer 3

Dieses kleine Skript/css loader https://github.com/rgrove/lazyload/

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

Answer 4

was:

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