Customizing Loading Messages
When pages are loading, a default message appears if there’s a delay or if the page is not yet preloaded. The jQuery Mobile framework allows you to customize this message and a page-error loading message.
You can customize the loading message through the loadingMessage property. SetloadingMessage to any custom string by binding to the mobileinit event, which jQuery Mobile fires as soon as the document loads.
$(document).bind("mobileinit", function() { $.mobile.loadingMessage = 'Please wait'; });
This code will display a loading message that says “Please wait.” The default message used for page loading is “Loading.” The property can also be set to false to display no message at all:
$(document).bind("mobileinit", function() { $.mobile.loadingMessage = false; });
When there is an error loading a page, jQuery Mobile displays a message that can also be customized through the API. The default message for page-load errors is “Error Loading Page.” You can set the pageLoadErrorMessage property to any custom string as the error message:
$(document).bind("mobileinit", function() { $.mobile.pageLoadErrorMessage = 'There was an error, please try again.'; });
Wrapping Up
Working with pages is easy with jQuery Mobile: all you really need to know is basic HTML and a few mobile-related attributes. With most of the heavy lifting being done by the framework, it’s easy to focus on the results of the website you’re building. Understanding the internal functionality behind how pages work in jQuery Mobile is what begins to set you up for writing custom functionality. Customizing specific functionality in the messaging and behind the scenes helps to personalize your website. The level of customization that jQuery Mobile provides can be very useful in making a website more user-friendly. Visual indicators, like custom loading messages and page transitions, set expectations for visitors and provide them with a frame of reference, so they know when certain things are happening. Preloading and caching improves usability by speeding up page loads and giving visitors what they want when they want it. jQuery Mobile provides fine-grained control to enhance mobile websites in a custom way.