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.1.0.
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 [, callback] ) 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.
-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. This is also useful because it forces the browser to use the available cached 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 JavaScript when needed or use the browser's cached version, if available. If src
is not present, jsl.load()
will process all previously added scripts, using the jsl.add()
, and asynchronously loads them in the HTML <head>
tag.
If you need on-demand loading, pass a script source and a callback. The callback will fire when the script object completes loading. This method of loading JavaScripts reduces overall page weight and loading times since scripts are loaded when needed. This method is also useful in AJAX situations where a user's action can trigger distinctive JavaScript dependancies.
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>
This example shows how to load and use a jQuery function from an anchor's onclick
<script type="text/javascript" src="jsl.js"></script>
...
<body>
...
<a onclick="jsl.load('http://code.jquery.com/jquery-latest.js',
function(){ $('body').html('Hello World') }); return false;" href="#">
Load jquery and write "hello world"
</a>
...
</body>
...