jQuery Mobile Transition Handler

HTML

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<div id="page1" data-role="page">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>
    <div data-role="content">
        <input type='Text'>
        <p>Go to <a href="#" onclick='loadPage2();'>page 2</a>.</p>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="header">
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
        <p>Go back to <a href="#page1">page 1</a>.</p>
    </div>
</div>

JavaScript

function loadPage2() {
    /* show wait page */
    $.mobile.loading( 'show', {
            text: 'Loading massively huge dataset',
            textVisible: true
    });
    
     /*  fake AJAX call */    
     setTimeout(callback, 1500);
 }

function callback() {
    $.mobile.changePage("#page2");
}