In my previous post, I outlined how to prefetch links to make jQuery mobile app load your pages faster. The ui-loader spinning animation was not shown as you navigate from one page to another.
Launch - The previous example with prefetch
But, as also mentioned, it has certain limitations,
You could also cache a specific page programmatically by using this call
pageContainerElement.page({ domCache: true });
If you want to cache all pages visited, you could turn on DOM caching using the below code (but keep an eye on the DOM size as it could grow very fast)
Launch - Example with prefetch and DOM cache enabled
mainpage-domcache.html
Here you will see that the spinning loader doesn't show up. The page is already there in the DOM after the first visit! You can click the links fast and see it still works fine. You can exclude the script to cache everything and try this code with multiple pages and see how caching works.
Just as in real life, there is a flip side to everything positive. Here, you have to be careful how big your DOM grows, as pages keep adding to it. You have to code for the clean up of older pages or pages you no longer need in cache. Mobile devices have limited memory and a bloating DOM could cause misery. So take care !
Launch - The previous example with prefetch
But, as also mentioned, it has certain limitations,
- If there are more pages, more http requests are sent out and more bandwidth is required to prefetch
- If a page hasn't been fully prefetched, the ui-loader spinner animation comes up till the page is fully loaded. Try to click fast and you will see
- Once you visit a prefetched page, navigating away from the page will remove the page from DOM. So this is not same as caching the page. The next visit to the page will again need the page to be fetched.
You could also cache a specific page programmatically by using this call
pageContainerElement.page({ domCache: true });
$.mobile.page.prototype.options.domCache = true;
You can now observe how caching works with the code inspector open (CTRL+SHIFT+I) in your browser. As you navigate, the visited page is not removed from the DOM and after the first visit, it remains put! You will remember in the previous post, the page div used to get added to the DOM and then removed on every page visit.
Let us visit the code...
Launch - Example with prefetch and DOM cache enabled
mainpage-domcache.html
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<!-- Use only if you want to cache all visited pages -->
<script>
$.mobile.page.prototype.options.domCache = true;
</script>
</head>$.mobile.page.prototype.options.domCache = true;
</script>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Header of Main Page</h1>
</div>
<div data-role="content">
<p><a href="secondpage-domcache.html" data-role="button" data-prefetch>Go to Page 2</a></p>
</div>
</div>
</body>
</html>
secondpage-domcache.html (to cache single page)
<title>Second Page</title>
<div id="page2" data-role="page" data-dom-cache="true">
<div data-role="header">
<h1>Header of Page 2</h1>
</div>
<div data-role="content">
<p><a href="#" data-role="button" data-rel="back">Go Back</a></p>
</div>
</div>
I have used this kind but the google ads on second page doesn't show ..
ReplyDeleteYou have to code for the clean up of older pages or pages you no longer need in cache. How can I do it?
ReplyDeleteeasiest way would probably be just to remove the page element (by id) from the DOM using http://api.jquery.com/remove/
Delete