Skip to main content

jQuery Mobile Prefetching pages demo

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


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>

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,
  • 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.

Comments

Popular posts from this blog

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesheet" href="dup.css" />  

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi

Fixing Date, Time and Zone on RHEL 6 command line

Had to fix all time related issues on a remote RHEL 6 server which runs without any windowing system. Plain ol' command line. Documenting steps here for future reference: Check to see if your date and timezone settings are accurate: # date # cat /etc/sysconfig/clock The server I accessed had wrong settings for both the commands. Here are the steps I used to correct: Find out your timezone from the folder /usr/share/zoneinfo # ls /usr/share/zoneinfo Mine was pointing to America/EDT instead of  Asia/Calcutta Update and save the /etc/sysconfig/clock file to # sudo vi /etc/sysconfig/clock ZONE="Asia/Calcutta" UTC=true ARC=false Remove the /etc/localtime # sudo rm /etc/localtime Create a new soft link to your time zone # cd /etc # sudo ln -s /usr/share/zoneinfo/Asia/Calcutta /etc/localtime # ls -al localtime Now it should show the link to your time zone Set your hardware clock to UTC # sudo hwclock --systohc --utc # hwclock --show Update your t