This interface is used to display the global loading box.
Use showLoading interface
AlipayJSBridge.call('showLoading', {
text: 'Loading',
});
Code sample
Show/hide global loading box:
<h1>Click the buttons below to see the different effects</h1>
<p>Note that the entire page will be covered after loading is displayed in Android system. So, please use the return key to turn off loading box.</p>
<a href="javascript:void(0)" class="btn show">Display loading</a>
<a href="javascript:void(0)" class="btn delay">Delay the loading display by 2 seconds</a>
<a href="javascript:void(0)" class="btn notext">Loading without text</a>
<script>
function ready(callback) {
// Call directly if JSBridge has been injected
if (window.AlipayJSBridge) {
callback && callback();
} else {
// Monitor the injected events if JSBridge hasn't been injected
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
document.querySelector('.show').addEventListener('click', function() {
AlipayJSBridge.call('showLoading', {
text: 'Loading',
});
setTimeout(function() {
AlipayJSBridge.call('hideLoading');
}, 3000);
});
document.querySelector('.delay').addEventListener('click', function() {
AlipayJSBridge.call('showLoading', {
text: 'Loading',
delay: 2000,
});
setTimeout(function() {
AlipayJSBridge.call('hideLoading');
}, 5000);
});
document.querySelector('.notext').addEventListener('click', function() {
AlipayJSBridge.call('showLoading', {
text: ' ',
});
setTimeout(function() {
AlipayJSBridge.call('hideLoading');
}, 3000);
});
});
</script>
API
AlipayJSBridge.call('showLoading',{
text, delay
})
Input parameters
Name | Type | Description | Required | Default value |
---|---|---|---|---|
text | string | Text contents; To set no text, enter a space key. | N | “Loading” |
delay | int | After how many seconds the loading box will be displayed. If hideLoading is called before, the loading will not be displayed. |
N | 0 |
autoHide | bool | By default, the container will automatically hide the loading box after pageFinish , it defaults to True. If it is set to false, auto-hiding will be turned off (for Android only). |
N | true |
cancelable | bool | Whether the Android return key can close the loading box. The physical return key can close the loading box by default (for Android only). | N | true |
Attentions
- After loading box is displayed on Android, the entire page will be covered. Therefore please use the return key to turn off the loading.
- For iOS, when you didn’t set the text value, you can only click the title bar and toolbar. And no contents can be covered when there are texts. In the 9.9.5 version and above, this problem has been fixed.
showLoading
is in webview level. So, callinghideLoading
on webview afterpushwindow
cannot turn off the loading of the previous webview. You must ensure thatshowLoading
andhideLoading
are executed in the same webview workspace.