# jQuery Asynchronous Anchor image Loader (Jaal)

Jaal helps loading background images asynchronously and this helps in loading these background images quickly therby improving
the user perceived performance.

Selected background images will be downloaded if they are visible and when they are visible inside the viewport (rectangular viewing region). Images can be loaded after an event is triggered (such as `click`, `mouseover`, and `scroll`) or after a specified delay.  It's advisable to call jail() after the DOM has been constructed (document ready).

First of all, this plugin requires you to make some HTML changes. The `data-style` attribute (HTML5 data attribute) should contain the css for the background image. 
I would suggest to add a `noscript` block so that in case the user doesn't have Javascript enabled, the background images will be displayed (progressive enhancement).

<pre>
  <code>
		<a href="#" class="bgAnchor" data-style="background:url('./img/sunflower.jpg') no-repeat;background-position:0px 0px;">
			<image src="./img/spacer.gif" alt = "Image 1" title = "Image 1" width="600" height="400"/>
		</a>
		<noscript>
			<a href="#" class="bgAnchor" style="background:url('./img/sunflower.jpg') no-repeat;background-position:0px 0px;">
			<image src="./img/spacer.gif" alt = "Image 1" title = "Image 1" width="600" height="400"/>
			</a>
		<noscript>
	</code>
</pre>

In a basic scenario, you just need to import `jquery`, `jaal.js` and call the function on the background images you want to lazy load.

<pre>
	<code>
		<script src="/js/jquery.js"></script>
		<script src="/js/jail.js"></script>
		<script>
			 $(function(){
			 	$("a.bgAnchor").jaal();	
		});
		</script>
	</code>
</pre>

You will verify how only the visible images are loaded after the DOM is ready.