logo

What is Lazy?

Lazy is javascript framework based on JQuery. It implemements a transparent lazy loading system of clientside code (javascript and css).

What developer have to do?

Developer don't worries to include all javascript plugins used to the page (and his associeted css files) or takes care if a plugin requires other plugins to work. The only action required is to include the lazy core file (lazy.core.js) in the page and then start use any plugins provided from the framework.

How Lazy works?

An example can explain the concept. The best way to enjoy it is to use Firefox with Firebug add-on. We want to apply the tab behaviour to the following HTML structure so we have to use Tabs plugin provided from the framework.

Panel 0

Panel 1

Panel 2

Panel 0

Panel 1

Panel 2

On the HTML panel of FireBug you can see that the only script of the framework included is lazy.core.js (other script or css files included like syntaxHighlighter are relative to the webSite layout). His weight is only few KB (3 or 4). We haven't used the framework yet so no plugins is downloaded to the client.

The two link that you can see here is used to apply the tab plugin behaviour.

Active first tab panel Active second tab panel


Now go to the Net panel of Firebug and observe what happens when you click on the first activation link. The code that is executed is the follow:

	
	$('activationTab').click(function(){ 
		$('tab1').tab({parameters..})
	});

After the click action we apply the Tab behavior to the first html structure. The framework manages the load for us: check if the plugin exist on client side, if doesn't find it, it is downloaded from the server and executed. commons.js instead is a collection of generic utilities and it is loaded because Tab component use it. When you click on the second link, the same component is applied to another structure:

	$('activationTab2').click(function(){ 
		$('tab2').tab({ }) 
	} ); 

as you can see there isn't any other http request for this plugin beacuse it already exist on client side, and it is only executed.

Why use Lazy?

Lazy reduce initial time loading of a web page and optimize the code load, only what its really used is downloaded on client. It's possibille to control