Question

I am having an issue with jquery mobile, when I load a page, it pulls the data from an exposed API in JSon format, parses it, then inserts the data into the DOM to display the page, but what’s happening is the page shows, then 2-4 seconds passes while it’s parsing the data, then inserts the data on to the page, and it is not very visually pleasing at all, just wondering how I can pre-load the DOM and parse the JSON before the pageChange animation fires.

Answer 1

The proper way to handle dynamically generated pages in JQuery Mobile is to bind the page retrieval to the beforepagechange event of your document. Once the page is retreived, you can proceed with the proper changepage.

For instance, with a getPageFromAPI function retrieving the complete Jquery object for your page accessed with the URL “newPageURL”

$(document).bind( "pagebeforechange", function( e, data ) {
    if ( (typeof data.toPage === "string") && (data.toPage == "newPageURL")  ) {
        e.preventDefault();    //to make sure we prevent standard page change
        getPageFromAPI({success: function (newPage) {
                $.mobile.changePage(newPage)
            }
        });
    }
});