tracking whether dynamic javascript files are loaded or not

Question

I am loading javascript dynamically thru following.

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file

This example is taken from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Now the problem is after calling the js function

loadjscssfile("myscript.js", "js")

i want to track whether its loaded or not. Because i want to call a function in the loaded file. Thanks for the help in advance.

Answer 1

You can use a try/catch statement, then you will not get an error if you call a missing function(inside try). If needed place an exception-handler inside the catch.

Answer 2

In addition to the try/catch method, you can create something that you can test for the existence of on an interval until you catch your script loaded:

var myCheck = setInterval(function {
  if (typeof(myFunc) == 'function') {
    clearInterval(myCheck);

    // Anything else here with your script.
  }
}, 100);