All Products
Search
Document Center

Mobile Platform as a Service:Hide the global loading box

Last Updated:Feb 07, 2021

The interface is used to hide the global loading box.

Use hideLoading interface

  1. AlipayJSBridge.call('hideLoading');

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 on Android system. So, please use the return key to turn off the loading.</p>
  3. <button class="btn show">Display loading</button>
  4. <button class="btn delay">Delay the loading display by 2 seconds</button>
  5. <button class="btn notext">Loading without text</button>
  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>