Using a single-page template for your mobile app makes your app faster and lighter. But you have to fetch each page during navigation and you end up seeing the ui-loader spinning icon animation every time. It can get to your nerves.
Launch - Example without prefetch
The above example, from my previous post shows how the spinning icon comes up each time you navigate from the main page to page 2. I will not list the code here as its already listed in an earlier post.
In a multi-page template whereas, the entire set of pages are already loaded into the DOM and the navigation is much faster. A similar behavior can be obtained in a single-page application by prefetching pages. This is done by just adding the attribute data-prefetch to all the links that you want to prefetch. As soon as the page loads, it starts fetching these links and loads it into the DOM. You can observe this behavior with the code inspector open (CTRL+SHIFT+I) in your browser. Now navigating to one of these links happens immediately and the spinning loader is no longer shown.
You could also prefetch a link programmatically by using this JavaScript call
$.mobile.loadPage( pageUrl );
The below code shows how data-prefetch works. You can launch it in a separate browser tab.
Launch - Example with prefetch
Here you will see that the spinning loader doesn't show up. (Of course you can click very fast and try to load before the prefetch occurs, the loader shows up only then.)
Great isn't it. But few things you have to take care,
Launch - Example without prefetch
The above example, from my previous post shows how the spinning icon comes up each time you navigate from the main page to page 2. I will not list the code here as its already listed in an earlier post.
In a multi-page template whereas, the entire set of pages are already loaded into the DOM and the navigation is much faster. A similar behavior can be obtained in a single-page application by prefetching pages. This is done by just adding the attribute data-prefetch to all the links that you want to prefetch. As soon as the page loads, it starts fetching these links and loads it into the DOM. You can observe this behavior with the code inspector open (CTRL+SHIFT+I) in your browser. Now navigating to one of these links happens immediately and the spinning loader is no longer shown.
You could also prefetch a link programmatically by using this JavaScript call
$.mobile.loadPage( pageUrl );
The below code shows how data-prefetch works. You can launch it in a separate browser tab.
Launch - Example with prefetch
mainpage.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>
</head>
<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.html" data-role="button" data-prefetch>Go to Page 2</a></p>
</div>
</div>
</body>
</html>
secondpage.html
<title>Second Page</title>
<div id="page2" data-role="page">
<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>
Great isn't it. But few things you have to take care,
- 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 comes up and the page is shown only after the page is completely fetched
- This is not same as the browser cache. Once you navigate to a prefetched page, and then navigate to another page, the prefetched page is removed from the DOM.
So use this judiciously to make your jQuery Mobile app navigation smoother to the user.
In my next post I will show how to cache a jQuery Mobile page in DOM and thus avoid the issue of multiple prefetch.
In my next post I will show how to cache a jQuery Mobile page in DOM and thus avoid the issue of multiple prefetch.
Comments
Post a Comment