Opóźnienie oddzwaniania, dopóki skrypt nie zostanie dodany do dokumentu?

Question

Jak można uzyskać, aby wywołanie zwrotne nie działało, dopóki skrypt nie zostanie faktycznie dołączony do dokumentu?

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

W idealnym świecie, można użyć właściwości znacznika <script />onload;

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

Jednak, this doesn't work in IE, więc mega-h4x są wymagane;

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 Twój if (typeof fileref != "undefined") był zbędny, ponieważ będzie ona zawsze oceniać true, więc można po prostu zrobić head.appendChild(fileref); bezpośrednio, jak w moim przykładzie.

Answer 2

Najłatwiej będzie określić jakąś widoczną callback() funkcję, która będzie działać w dynamicznie zawarte skrypt, na końcu.

Answer 3

Ta niewielka ładowarka skrypt/css będzie wykonać zadanie https://github.com/rgrove/lazyload/

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

Answer 4

co:

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