在重定向页面上加载消息

Question

I have a php payment button on a html page, when the user clicks on it, he get redirected to a url on another server to complete the payment. Anyway the loading time before it gets redirected is often too much and can confuse the user with several seconds of inactivity. Can you advise how can I make loading page with message text and animation gif that appears as soon as the user clicks the button? Thus the user will be aware that the page is loading and he will be soon redirected to approprieted url?

Thanks

Answer 1

You can do this through jQuery. Give the button an ID. then set an onClick event on the button. Somewhere in your page put a <div> which contains the text Loading... Please wait. (You can also add an animated gif.) By default make this <div> hidden. Then set this <div> to show when the user clicks the button.

<div id="load"> <img src="loading.gif"/> Loading... Please wait</div>
<button id='buttonID'>Button</button>

$(document).ready(function (){
  //This line below would hide the div when the page load by default
  $('#load').hide();

  //This would display when the user clicks the button
  $('#buttonID').click(function (){
    $('#load').show();
  });
});