Javascript onload event - how do I know if a script is loaded?

Question

How can I use javascript to determine if an HTMLScriptElement has already been fully loaded?

How to determine if a loaded dynamically loaded script completed loading without using onload or onreadystate change events?

The code is as follows:

TOOL.loadScript = function (url, callback, reappend, deepSearch) { var head, curr, child, tempScript, alreadyAppended, queue, alreadyHandled, script, handler, loadFunc; head = document.getElementsByTagName("head")[0]; tempScript = document.createElement("script"); tempScript.src = url; alreadyAppended = false; queue = []; if (deepSearch) { // search entire document queue.push(document.firstElementChild); } else { // just search the head element queue.push(head); } while (queue.length !== 0) { curr = queue.shift(); // add child nodes to queue child = curr.firstElementChild; if (child !== null && child !== undefined) { queue.push(child); child = child.nextElementSibling; while (child !== null && child !== undefined) { queue.push(child); child = child.nextElementSibling; } } if (curr.tagName !== null && curr.tagName !== undefined) { if (curr.tagName.toLowerCase() === "script" && curr.src === tempScript.src) { script = curr; alreadyAppended = true; break; } } } if (!alreadyAppended) { script = document.createElement("script"); script.type = "text/javascript"; script.async = true; script.src = url; } alreadyHandled = false; handler = function (event) { console.log("handling event..."); if (!alreadyHandled) { if ((!event.readyState) || (event && (event.readyState === "loaded" || event.readyState === "complete"))) { alreadyHandled = true; callback.apply(script, [url]); if (loadFunc) { loadFunc.apply(script, arguments); } } } }; if (script.onreadystatechange === undefined) { loadFunc = script.onload; script.onload = handler; } else { loadFunc = script.onreadystatechange; script.onreadystatechange = handler; } 

I need help here. I want the callback function to work even if alreadyAppeneded === true and the same script has already been loaded, but only if this script is fully completed.

  if (!alreadyAppended || (alreadyAppended && reappend)) { head.appendChild(script); } }; 

BOTTOM LINE: How to determine if a download has completed a script? If necessary, ask me questions.

Thanks.

Answer 1

Why not add id to the script element? Check if the identifier exists before continuing.

 function includeJs(jsFilePath) { if (document.getElementById(jsFilePath+"_script")) { return; } var js = document.createElement("script"); js.type = "text/javascript"; js.id = jsFilePath+"_script"; js.src = jsFilePath; document.body.appendChild(js); } 

Answer 2

Lazy Implementation: Create an array that you can use to click on the source of all loaded scripts and load them by inserting them into the list. Each time, check if the given src is in the array, and if so, call the callback immediately.

What do you do with the case when its added but not loaded question becomes a question. If you want the callback to work, but you want it to start after it loads, you could create an associative array with the src key as the key and the script element as the value. From there, enable onload or onreadystatechange twice, wrapping the original, for example:

 var temponload = element.onreadystatechange || element.onload; if (element.onreadystatechange === undefined) element.onload = function(e) { temponload(); temponload(); }; else element.onreadystatechange = function (e) { temponload(); temponload(); }; 

You have other code that you might need for this, but you should start with it, hopefully.

Answer 3

You cannot tell when the script loaded. You can put the global variable in the script that you want to check, and then check its presence.

There is a new project called LABjs (loading and blocking Javascript) to dynamically load scripts and thus indicate when they are loaded (http://blog.getify.com/2009/11/labjs-new-hotness -for- script -loading / <- check it out)