On demand loading is a technique which means that you only load the element/content when it is needed. This results is a faster application because now you are
not loading all the unnecessary content which is not needed right away.
Consider that you have to display help text to users. One way is to keep the complete help text inside your page and show/hide depending on the user’s selection.
<a href="#" id="link">Show</a>
<div id="helpDiv">
As developers we sit static on a chair for 7-8 hours everyday. We solve problems and develop interesting applications. Each day we learn something new
that enhances our knowledge. Unfortunately, we don’t realize that the process of getting smarter is leaving our health vulnerable. No matter how comfortable
you feel on your chair it will have a deep impact on your health.
....... and so on
</div>
And here is the JavaScript code to toggle the show/hide of the helpDiv element.
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
// hide all the elements
$("#helpDiv").hide();
$("#link").click(function()
{
var currentText = $("#link").text();
// toggle between hide and show
$("#helpDiv").toggle();
$("#link").text(currentText == "Show" ? "Hide" : currentText);
});
});
</script>
The page size is around 3K which is mainly because of the embedded help text inside the page. Let's move the text out to a different file so we can decrease
the page size.
I have created a page called Help.aspx which will contain the help text. Here is the HTML for the Help.aspx page:
<div>
As developers we sit static on a chair for 7-8 hours everyday. We solve problems and develop interesting applications. Each day we learn something new that
enhances our knowledge. Unfortunately, we don’t realize that the process of getting smarter is leaving our health vulnerable. No matter how comfortable you
feel on your chair it will have a deep impact on your health.
and so on.......
</div>
Now, let's use JQuery to load this page into the helpDiv element only when the user clicks the "Show Help" button.
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
// hide all the elements
$("#helpDiv").hide();
$("#link").click(function()
{
var currentText = $("#link").text();
$("#helpDiv").load("Help.aspx");
// toggle between hide and show
$("#helpDiv").toggle();
$("#link").text(currentText == "Show" ? "Hide" : currentText);
});
});
</script>
The load function of JQuery is responsible for loading the contents of the URL and placing it in the element's innerHTML property.
Although we have removed the help text from the page but now each time we click on the link it fetches the contents of the Help.aspx page. Since, the help content is static we can make use of caching and cache the Ajax request in the browser cache. Simply, add the following line to the Help.aspx page.
<%@ OutputCache Duration="60" VaryByParam="none" %>
Now, the Help.aspx page is only requested the first time and all the subsequent calls will be loaded from the browser cache hence improving the performance.