jQuery Mobile - Prefetching pages

Description

Including the attribute data-prefetch, we can prefetch pages into the DOM in the single page templates. It helps to link those points to the page. After the primary page is loaded, the target page is loaded in the background and the pagecreate event is triggered.

Using the pagecontainer widget's load() method, we can prefetch a page alternatively.

$( ":mobile-pagecontainer" ).pagecontainer( "load", pageUrl, { showLoadMsg: false } );

Example

Following example demonstrates the use of Prefetching Pages in the jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to Tutorialspoint!!! </h2>
            <a href = "#page2" data-prefetch = "true" class = "ui-btn ui-btn-inline">Next Page</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>

      <div data-role = "page" data-dialog = "true" id = "page2">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Click the link to go page one.</p>
            <a href = "#page1" class = "ui-btn">Back to Previous Page</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as prefetching_page.html file in your server root folder.
Open this HTML file as http://localhost/prefetching_page.html and the following output will be displayed.

jquery_mobile_pages.htm