JSL (JavaScript Loader)

Do you want an ultra fast web site? Get JSL and optimize your JavaScript loading now!

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...

Features

Download new

Download JSL version 1.1.0.

Discuss

API

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.


Installing JSL

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.

Normal Script Inclusion
<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>
Single Script Tag Inclusion
<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.add( src [, position] )

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.

Arguments
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. This is also useful because it forces the browser to use the available cached JavaScripts.
Example 1 - Ordered loading

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>
  ...

JSL.load( src [, callback])

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.

Arguments
src (optional) String
The JavaScript source url to load.
callback (optional) Mixed
The callback to fire after the JavaScript finishes loading.
Example 2 - Single script tag lazy loading

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>
  ...
Example 3 - Inline lazy loading

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>
Example 4 - On-Demand loading with a callback

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> 
  ...

blog comments powered by Disqus