Imagine there's a 4-lane highway between your web browser and the internet itself. This highway is optimize to let pictures, text, and css fly by. But, when it comes to external scripts, the highway creates a toll booth that slows traffic. The worst part is that pictures text, and css caught behind these scripts have to wait until they pass through. JSL is the latest in toll both avoidance. It creates an express lane that lets all pictures, text, css, and external scripts pass by without worrying about toll booths. That means you save time and money on traffic costs :)
Now for the the techie information...
Download JSL version 1.0.1.
Installing JSL JSL can be loaded in two ways. Normal and Single Script Tag.
JSL.add( src, position ) This function accepts the url string for the external script. It adds it to the queue based on the position(optional) you specify and waits for jsl.load() to load them.
JSL.load( src ) This function is able to load a single external script or process the jsl.add() loaded scripts.
There are two ways to install the JSL script. Normal and Single Tag Script. Single Tag Script inclusion is a degrading method that allows an external script to load and execute code within its own script tag. The benefit is less code and graceful degradation.
<script type="text/javascript" src="jsl.js"></script>
<script type="text/javascript">
jsl.add("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
jsl.load();
</script>
<script type="text/javascript" src="jsl.js">
jsl.add("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
jsl.load();
</script>
JSL allows you add as many script sources as needed. Use the jsl.add() function for each JavaScript file to load. After all scripts are added use the jsl.load() to asynchronously load them in the HTML <head> tag.
src String
The JavaScript source url to load.
position (optional) String
The numerical position (loads hierarchically) in which a JavaScript should load in the HTML. If no position is provided, JSL will add scripts as they appear. Use -1 to load the script immediately after the jsl.load() function. This is helpful to avoid race conditions when using inline and other dependent JavaScripts.
Loads JSL which includes jQuery Core and jQuery UI. This example takes into consideration the need to load jQuery Core as soon as possible and prepares for inline and other external scripts that may depend on jQuery. The script block needs to appear high in the HTML DOM and before other scripts in order to prevent race conditions on included scripts.
<html>
<head>
<title>An example</title>
<script type="text/javascript" src="jsl.js">
jsl.add("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js", -1);
jsl.add("http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js", 1);
jsl.add("http://mysite.com/js/global.js"); //in this example, this loads in 0 position
jsl.add("http://mysite.com/js/jqueryscripts.js", 2); //needs jQuery and jQueryUI first
jsl.add("http://mysite.com/js/plugins.js", 3);
jsl.load();
</script>
...
</head>
...
You can pass a url to the jsl.load() function to load a single external script on-demand. If src is not present, jsl.load() will process all added scripts, using jsl.add(), and asynchronously loads them in the HTML <head> tag.
src (optional) String
The JavaScript source url to load.
The above example shows how to load several external JavaScripts asynchronously. This example shows how to load a single external JavaScript on-demand.
<html>
<head>
<title>An example</title>
<script type="text/javascript" src="jsl.js">
jsl.load("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
</script>
...
</head>
...
If jsl.js is previously loaded, you can simply run it as an inline function.
<script type="text/javascript" >
...
jsl.load("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
...
</script>
