The
latest release of jQuery Mobile beta 2 is characterized by a new added feature.
This feature is called Page pre-fetch, which finds the links of the
active pages and makes a lazy load for these pages into the DOM beyond the
scene before the user clicks on it.
With this feature we don't need to add all
pages on the same HTML documents. In the previous releases, this feature works
automatically when the user adds the pages with the same file.
Let's start with a simple example to illustrate
how it works.
The first page is:
Page1.html
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="content">
<a href="Page2.html" data-prefetch>Link</a>
</div>
</div>
</body>
</html>
And the second page is:
Page2.html
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="page2" data-role="page">
<div data-role=" content">
This is page 2 loaded in the DOM by Page pre-fetch option
</div>
</div>
</body>
</html>
Notice that the anchor of the first page has a
data-prefetch option. Try to open "page1"; the DOM would be like
this:
Here you can find that "page1" is
active and the html of "page2" is added to the DOM, even though it is
in separate HTML documents and it is not called before.
According to this feature, after clicking on
the link "Page2" it will be displayed immediately without the Ajax
loader.
Note:
But it's so important to use this option only with highly likely that the link
will be visited by users due to Pre-fetching increased bandwidth by using
additional HTTP requests.
Add pre-fetch
option programmatically:
In this case we can use $.mobile.loadPage
method. This method loads the external page into DOM without any visual effect
on the current active page.
Example:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">
$(window).load(function () { $.mobile.loadPage("Page2.html"); });
</script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="content">
<a href="Page2.html" >Link</a>
</div>
</div>
</body>
</html>
$.mobile.loadPage method is the core of this feature which used
by jQuery framework, here you can find how it works and how it finds the links in the active page:
//prefetch pages when anchors with data-prefetch are encountered
$( ".ui-page" ).live( "pageshow.prefetch", function(){ var urls = [];
$( this ).find( "a:jqmData(prefetch)" ).each(function(){ var url = $( this ).attr( "href" );
if ( url && $.inArray( url, urls ) === -1 ) { urls.push( url );
$.mobile.loadPage( url );
}
});
} );
Hope that help.