In most cases being able to preload pages before the user clicks on a link will make your app feel faster, but you do need to be careful that the preloading isn’t intefering with anything more important.

My initial attempt at improving performance was the standard jQuery Mobile code below - very easy, all I had to do was add the data-prefetch attribute to some links.

<div data-role="header" data-theme="a">
    <ul class="ui-btn-left">
        <li>
            <a href="edit.html" id="btnNewMockup" data-role="button" data-prefetch
            data-icon="fplus">New</a>
        </li>
    </ul>
    <h1>
        Conceptual CSS
    </h1>
    <ul class="ui-btn-right">
        <li>
            <a href="fonts.html" data-role="button" data-icon="fplus" data-prefetch
            data-transition="slide">Fonts</a>
        </li>
        <li>
            <a href="imagemanager.html" data-role="button" data-icon="fplus" data-prefetch
            data-transition="slide">Images</a>
        </li>
    </ul>
</div>

Unfortunately this didn’t quite work as expected - All the nice thumbnail images on the app start page were replaced with black squares for several seconds.

Since the prefetch requests are processed with the page show event, they will compete with anything else that may be happening at the same time - in this case images that need to be shown well before the user tries to open another page.

The solution is to take manual control of the preloading. This involves a plugin (https://github.com/alexanderdickson/waitForImages) to tell when the page is really done loading and some code added to the pageshow event:

    if (!page.prefetchDone) {
        page.prefetchDone = true;
        $pagediv.waitForImages(function() {
            $.mobile.loadPage("edit.html", {
                showLoadMsg: false
            });
            $.mobile.loadPage("fonts.html", {
                showLoadMsg: false
            });
            $.mobile.loadPage("imagemanager.html", {
                showLoadMsg: false
            });
        });
    }