All Products
Search
Document Center

Show loading

Last Updated: Feb 10, 2021

This interface is used to display the global loading box.

Use showLoading interface

 
  1. AlipayJSBridge.call('showLoading', {
  2. text: 'Loading',
  3. });

Code sample

Show/hide global loading box:

 
  1. <h1>Click the buttons below to see the different effects</h1>
  2. <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>
  3. <a href="javascript:void(0)" class="btn show">Display loading</a>
  4. <a href="javascript:void(0)" class="btn delay">Delay the loading display by 2 seconds</a>
  5. <a href="javascript:void(0)" class="btn notext">Loading without text</a>
  6. <script>
  7. function ready(callback) {
  8. // Call directly if JSBridge has been injected
  9. if (window.AlipayJSBridge) {
  10. callback && callback();
  11. } else {
  12. // Monitor the injected events if JSBridge hasn't been injected
  13. document.addEventListener('AlipayJSBridgeReady', callback, false);
  14. }
  15. }
  16. ready(function() {
  17. document.querySelector('.show').addEventListener('click', function() {
  18. AlipayJSBridge.call('showLoading', {
  19. text: 'Loading',
  20. });
  21. setTimeout(function() {
  22. AlipayJSBridge.call('hideLoading');
  23. }, 3000);
  24. });
  25. document.querySelector('.delay').addEventListener('click', function() {
  26. AlipayJSBridge.call('showLoading', {
  27. text: 'Loading',
  28. delay: 2000,
  29. });
  30. setTimeout(function() {
  31. AlipayJSBridge.call('hideLoading');
  32. }, 5000);
  33. });
  34. document.querySelector('.notext').addEventListener('click', function() {
  35. AlipayJSBridge.call('showLoading', {
  36. text: ' ',
  37. });
  38. setTimeout(function() {
  39. AlipayJSBridge.call('hideLoading');
  40. }, 3000);
  41. });
  42. });
  43. </script>

API

 
  1. AlipayJSBridge.call('showLoading',{
  2. text, delay
  3. })

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, calling hideLoading on webview after pushwindow cannot turn off the loading of the previous webview. You must ensure that showLoading and hideLoading are executed in the same webview workspace.