Using a single-page template for your mobile app makes your mobile app faster and lighter. But you have to fetch each page during navigation. You can see the ui-loader
spinning icon every time a page loads. This problem does not happen with a multi-page template application, as all the pages are already preloaded into the DOM. By using the prefetch feature, a single-page template application can be made to mimic the multi-page template application.
A page marked for prefetch is loaded in the background and is immediately available when the user tries to open it. You can prefetch pages in two ways. The first is by just adding the data-prefetch
attribute to the anchor link. The second way is by using JavaScript to call the loadPage()
method. This recipe shows you how to improve page loading speed by prefetching pages in your jQuery Mobile app.