<html>
<head>
<script src="/myscript.js"></script>
</head>
<body>
<!-- Your stuff here -->
</body>
</html>
In the example above, the browser window will finish loading only after myscript.js finished loading. This syntax is very convenient, but trouble starts when the Javascript files become quite large. In such cases, loading the Javascript files dynamically can be used to reduce the load-time and overall memory footprint of your application.
Below are three Javascript functions you can easily copy paste into your own project. These functions will dynamically create <script> tags and add them to the <head> tag of the DOM structure:
- loadScript: loads a single script file from a specified url
- loadScriptsSeq: loads multiple script files, sequentially (one file at a time)
- loadScriptsPar: loads multiple script files, in parallel
Using them is very simple:
// Example 1: myscript.js will be loaded and then the callback function will be called
loadScript("/myscript.js", function() {
// code to be executed after the file has been loaded
});
// Example 2: primary.js will be loaded first and only then will dependency.js be loaded
loadScriptsSeq(["/primary.js", "/dependency.js"], function() {
// loadScript - Loads a single Javascript file into the browser
// code to be executed after both files have been loaded
});
// Example 3: primary1.js and primary2.js will be loaded in parallel
loadScriptsPar(["/primary1.js", "/primary2.js"], function() {
// code to be executed after both files have been loaded
});
// loadScript - Loads a single Javascript file into the browser
// Arguments:
// url - the address of the script file
// callback - called when the script has been loaded
var loadScript = (function(url, callback) {
if (callback == null) { callback = function() {}; }
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.addEventListener("load", function() {
script.onLoad = null;
callback(script);
// url - the address of the script file
// callback - called when the script has been loaded
var loadScript = (function(url, callback) {
if (callback == null) { callback = function() {}; }
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.addEventListener("load", function() {
script.onLoad = null;
callback(script);
});
script.onLoad = function () {};
script.src = url;
head.appendChild(script);
});
// loadScriptsSeq - Loads multiple scripts into the browser, in sequence
script.onLoad = function () {};
script.src = url;
head.appendChild(script);
});
// loadScriptsSeq - Loads multiple scripts into the browser, in sequence
// Arguments:
// urls - an array of addresses for the script files to load, in required order of execution
// callback - a function called when all the scripts have been loaded
var loadScriptsSeq = (function(urls, callback) {
if (callback == null) { callback = function() {}; }
return (function iLoadScripts(urls, index, callback) {
// urls - an array of addresses for the script files to load, in required order of execution
// callback - a function called when all the scripts have been loaded
var loadScriptsSeq = (function(urls, callback) {
if (callback == null) { callback = function() {}; }
return (function iLoadScripts(urls, index, callback) {
loadScript(urls[index], function() {
if (index == urls.length - 1) { callback(); }
else { iLoadScripts(urls, index + 1, callback); }
});
}(urls, 0, callback));
});
// loadScriptsPar - Loads multiple script files into the browser, in parallel
if (index == urls.length - 1) { callback(); }
else { iLoadScripts(urls, index + 1, callback); }
});
}(urls, 0, callback));
});
// loadScriptsPar - Loads multiple script files into the browser, in parallel
// Arguments:
// url - an array of addresses for the script files to load
// callback - a function called when all the scripts have been loaded
var loadScriptsPar = (function(urls, callback) {
if (callback == null) { callback = function() {}; }
var count = 0;
urls.forEach(function(url) {
loadScript(url, function() {
count++;
if (count == urls.length) {
callback();
}
});
});
});
// url - an array of addresses for the script files to load
// callback - a function called when all the scripts have been loaded
var loadScriptsPar = (function(urls, callback) {
if (callback == null) { callback = function() {}; }
var count = 0;
urls.forEach(function(url) {
loadScript(url, function() {
count++;
if (count == urls.length) {
callback();
}
});
});
});
Posts
0 comments:
Post a Comment