demo/example8_callback.html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>jQuery Asynch Image Loader - Example 8 - Test for callbacks</title>
		<script type="text/javascript" src="../lib/jquery.js"></script>
		<script type="text/javascript" src="../src/jail.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('img.lazy').jail({
					callbackAfterEachImage : function() {alert("one image is loaded");},
					callback : (function(){alert("All the images are loaded");})
				});
			});
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div class="content">
				<p> Images visible in the viewport loaded after DOM is ready + callbackAfterEachImage parameter + callback parameter</p>
				<div>
					<img class="lazy" data-src="img/sample1.jpg" src="img/blank.gif" width="420" height="320"/>
					<noscript><img class="nolazy" src="img/sample1.jpg" width="420" height="320"/></noscript>
				</div>
				<div>
					<img class="lazy" data-src="img/sample2.jpg" src="img/blank.gif"  width="420" height="320"/>
					<noscript><img class="nolazy" src="img/sample2.jpg" width="420" height="320"/></noscript>
				</div>
				<div>
					<img class="lazy" data-src="img/sample3.jpg" src="img/blank.gif"  width="420" height="320"/>
					<noscript><img class="nolazy" src="img/sample3.jpg" width="420" height="320"/></noscript>
				</div>
				<div>
					<img class="lazy" data-src="img/sample5.jpg" src="img/blank.gif"  width="420" height="320"/>
					<noscript><img class="nolazy" src="img/sample5.jpg" width="420" height="320"/></noscript>
				</div>
			
			</div>
		</div>
	</body>
</html>

 