loadscript: allow to load multiple scripts - jscancer - Javascript crap (relatively small)
HTML git clone git://git.codemadness.org/jscancer
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
DIR commit f935729e47ef10ea25e010272b7e31a435f3b7db
DIR parent afcb92029e07859292909593fa69e0a7aa31c436
HTML Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Thu, 2 Jun 2016 18:40:23 +0200
loadscript: allow to load multiple scripts
- fire callback only if all scripts are successfully loaded.
- improve example.
Diffstat:
A loadscript/README | 36 +++++++++++++++++++++++++++++++
M loadscript/example.html | 14 ++++++++------
M loadscript/loadscript.js | 47 ++++++++++++++++++++-----------
3 files changed, 74 insertions(+), 23 deletions(-)
---
DIR diff --git a/loadscript/README b/loadscript/README
@@ -0,0 +1,36 @@
+loadscript
+==========
+
+Small script to load other scripts. Particulary useful to load bloated scripts
+on-demand.
+
+
+FEATURES
+--------
+
+- Small:
+ - Filesize: +- 1KB.
+ - Lines: +- 50, not much code, so hopefully easy to understand.
+ - No dependencies on other libraries like jQuery.
+- Permissive ISC license, see LICENSE file, feel free to contact me for
+ questions or other terms.
+- Officially supported browsers are:
+ - Firefox and Firefox ESR.
+ - Chrome and most recent webkit-based browsers.
+ - IE10+.
+
+
+USAGE
+-----
+
+
+EXAMPLES
+--------
+
+See example.html for an example.
+
+
+Author
+------
+
+Hiltjo Posthuma <hiltjo@codemadness.org>
DIR diff --git a/loadscript/example.html b/loadscript/example.html
@@ -1,18 +1,20 @@
<html>
<head>
-<script type="text/javascript" src="loadscript.js"></script>
</head>
<body>
-<input type="button" id="test" />
+<input type="button" id="test" value="Plop" />
+
+<script type="text/javascript" src="loadscript.js"></script>
<script type="text/javascript">
var el = document.getElementById("test");
-el.onclick = function() {
- script_load("example_load.js", function() {
+el.addEventListener("click", function() {
+ scripts_load(["example_load.js"], function() {
test_init();
});
- this.style.display = "none"; // hide button.
-};
+ // this.style.display = "none"; // hide button.
+ el.removeEventListener("click", this);
+});
</script>
</body>
</html>
DIR diff --git a/loadscript/loadscript.js b/loadscript/loadscript.js
@@ -1,28 +1,40 @@
var script_loaded = {};
+
function script_load(uri, fn) {
// load script once.
if (script_loaded[uri] !== undefined)
return;
- fn = fn || function() {};
- script_loaded[uri] = {
- "fn": function() {
- // execute function once.
- fn();
- script_loaded[uri].fn = function() {};
- }
- };
var script = document.createElement("script");
script.type = "text/javascript";
script.src = uri;
-// script.onreadystatechange = function() {
-// switch (this.readyState) {
-// case "complete":
-// case "loaded":
-// script_loaded[uri].fn();
-// }
-// }
+ script.async = true;
+ var onload = function() {
+ if (script_loaded[uri] === undefined) {
+ script_loaded[uri] = true;
+ fn();
+ }
+ };
+ script.onreadystatechange = function() {
+ switch (this.readyState) {
+ case "complete":
+ case "loaded":
+ onload();
+ }
+ }
script.onload = function() {
- script_loaded[uri].fn();
+ onload();
};
- document.head.appendChild(script);
+ document.getElementsByTagName("head")[0].appendChild(script);
}
+
+// load list of uri's, fire fn() when all are loaded.
+function scripts_load(uris, fn) {
+ var checkfn = function() {
+ for (var i = 0; i < uris.length; i++)
+ if (script_loaded[uris[i]] === undefined)
+ return; // not all scripts are loaded.
+ fn();
+ };
+ for (var i = 0; i < uris.length; i++)
+ script_load(uris[i], checkfn);
+}
+\ No newline at end of file