If you don’t use jQuery on all your site pages why incur the cost of loading it? With Tierra Templates lazy loading of jQuery is easily accomplished by using conditional blocks in your templates.
As a simple example lets build a two page site – one page uses jQuery and the other doesn’t. Both pages share a common structure so lets define a parent template for both of them named _page.html:
<html>
<head>
[@ start jQueryInclude if jQueryOnLoad @]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
[@ echo jQueryOnLoad @]
});
</script>
[@ end jQueryInclude @]
</head>
<body>
[@ echo content @]
</body>
</html>the _page.html template loads the jQuery file only if the jQueryOnLoad block is defined. Let’s see how we can use that in the page that uses jQuery:
[@ extends "_page.html" @]
[@ start jQueryOnLoad @]
$(".testClick").click(function() {
alert("clicked!");
});
[@ end jQueryOnLoad @]
[@ start content @]
<a href="#" class="testClick">test</a>
[@ end content @]this template expands out to:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".testClick").click(function() {
alert("clicked!");
});
});
</script>
</head>
<body>
<a href="#" class="testClick">test</a>
</body>
</html>for the second page lets not define a jQueryOnLoad block:
[@ extends "_page.html" @] [@ start content @] <a href="#" class="testClick">test</a> [@ end content @]
this final template expands out to:
<html> <head> </head> <body> <a href="#" class="testClick">test</a> </body> </html>
It’s as simple as that!