{"id":62,"date":"2023-08-25T17:32:36","date_gmt":"2023-08-25T17:32:36","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=62"},"modified":"2023-08-25T17:32:36","modified_gmt":"2023-08-25T17:32:36","slug":"loader","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/loader\/","title":{"rendered":"Loader Widget"},"content":{"rendered":"

\nLoader Widget<\/span>version added: 1.2<\/span>\n<\/h2>\n
\n

Description: <\/strong>Handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. <\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
html<\/a><\/div>\n
text<\/a><\/div>\n
textVisible<\/a><\/div>\n
textonly<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n
\n

Methods<\/h3>\n
checkLoaderPosition<\/a><\/div>\n
fakeFixLoader<\/a><\/div>\n
hide<\/a><\/div>\n
hidePageLoadingMsg<\/a><\/div>\n
loading<\/a><\/div>\n
resetHtml<\/a><\/div>\n
show<\/a><\/div>\n
showPageLoadingMsg<\/a><\/div>\n<\/div>\n
\n

Events<\/h3>\n
create<\/a><\/div>\n<\/div><\/section>
\n\t\t

The Loader Widget<\/h2>\n\t\t

The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. The loader dialog was previously configured globally with three settings $.mobile.loadingMessage<\/code>, $.mobile.loadingMessageTextVisible<\/code>, and $.mobile.loadingMessageTheme<\/code> which are now deprecated. In addition to the methods for showing and hiding, $.mobile.showPageLoadingMsg<\/code> and $.mobile.hidePageLoadingMsg<\/code> are also deprecated.<\/p>\n\t\t

The loader widget handles the task of displaying the loading dialog when jQuery Mobile pulls in content via Ajax. It can also be displayed manually for custom loading actions using the $.mobile.loading<\/code> helper method (See the global method docs).<\/p>\n\t\t

To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit<\/code> event.<\/p> Below are the defaults:\n\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( document<\/span> ).on( "mobileinit"<\/span>, function<\/span>(<\/span>) <\/span>{<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.text = "loading"<\/span>;<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.textVisible = false<\/span>;<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.theme = "a"<\/span>;<\/code><\/div><\/div>
  $.mobile.loader.prototype.options.html = ""<\/span>;<\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t
These settings will be overridden by the deprecated settings to preserve backward compatibility. Once the deprecated settings are removed these defaults will only be superseded by the method params object described in the global method docs under $.mobile.loading<\/code>.<\/p>\n\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
6<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$.mobile.loading( "show"<\/span>, {<\/code><\/div><\/div>
  text<\/span>: "foo"<\/span>,<\/code><\/div><\/div>
  textVisible<\/span>: true<\/span>,<\/code><\/div><\/div>
  theme<\/span>: "z"<\/span>,<\/code><\/div><\/div>
  html<\/span>: ""<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t<\/div>\n
Options<\/h2><\/header>
\n
html \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>string<\/a>\n<\/div>\n
\nDefault: <\/strong>""<\/code>\n<\/div>\n
If this is set to a non empty string value, it will be used to replace the entirety of the loader's inner html.<\/div>\nCode examples:<\/strong>
Initialize the loading with the html<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loading({<\/code><\/div><\/div>
  html<\/span>: "<span class="<\/span>ui-icon ui-icon-loading"><img src="<\/span>jquery-logo.png" \/><h2>is loading for you ...<\/h2><\/span>"<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the html<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> html = $( ".selector"<\/span> ).loading( "option"<\/span>, "html"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loading( "option"<\/span>, "html"<\/span>, "<span class="<\/span>ui-icon ui-icon-loading"><img src="<\/span>jquery-logo.png" \/><h2>is loading for you ...<\/h2><\/span>"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
text \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>string<\/a>\n<\/div>\n
\nDefault: <\/strong>loading<\/code>\n<\/div>\n
Sets the text of the message.<\/div>\nCode examples:<\/strong>
Initialize the loading with the text<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loading({<\/code><\/div><\/div>
  text<\/span>: "Loading Page..."<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the text<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> text = $( ".selector"<\/span> ).loading( "option"<\/span>, "text"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loading( "option"<\/span>, "text"<\/span>, "Loading Page..."<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
textVisible \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>boolean<\/a>\n<\/div>\n
\nDefault: <\/strong>false<\/code>\n<\/div>\n
If true, the text value will be used under the spinner.<\/div>\nCode examples:<\/strong>
Initialize the loading with the textVisible<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loading({<\/code><\/div><\/div>
  textVisible<\/span>: true<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the textVisible<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> textVisible = $( ".selector"<\/span> ).loading( "option"<\/span>, "textVisible"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loading( "option"<\/span>, "textVisible"<\/span>, true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
textonly \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>boolean<\/a>\n<\/div>\n
\nDefault: <\/strong>false<\/code>\n<\/div>\n
If true, the "spinner" image will be hidden when the message is shown.<\/div>\nCode examples:<\/strong>
Initialize the loading with the textonly<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loading({<\/code><\/div><\/div>
  textonly<\/span>: true<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the textonly<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> textonly = $( ".selector"<\/span> ).loading( "option"<\/span>, "textonly"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loading( "option"<\/span>, "textonly"<\/span>, true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n
\n
theme \n\t\t\t\t\t<\/h3>\n
\nType: <\/strong>string<\/a>\n<\/div>\n
\nDefault: <\/strong>a<\/code>\n<\/div>\n
Sets the color scheme (swatch) for the loading message. It accepts a single letter from a-z that maps to the swatches included in your theme.<\/div>\nCode examples:<\/strong>
Initialize the loading with the theme<\/code> option specified:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
$( ".selector"<\/span> ).loading({<\/code><\/div><\/div>
  theme<\/span>: "b"<\/span><\/code><\/div><\/div>
});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n
Get or set the theme<\/code> option, after initialization:<\/p>\n
\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\/\/ Getter<\/span><\/code><\/div><\/div>
var<\/span> theme = $( ".selector"<\/span> ).loading( "option"<\/span>, "theme"<\/span> );<\/code><\/div><\/div>
 <\/code><\/div><\/div>
\/\/ Setter<\/span><\/code><\/div><\/div>
$( ".selector"<\/span> ).loading( "option"<\/span>, "theme"<\/span>, "b"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section>
Methods<\/h2><\/header>
\n
checkLoaderPosition()Returns: jQuery<\/a> (plugin only<\/a>)<\/span>\n<\/h3>\n
Check position of loader to see if it appears to be "fixed" to center.\n\t\t\t<\/div>\n