jquery移动显示加载器onsubmit

Question

在jquery移动应用上工作，用户可以登录。我在表单上有一个加载器，我希望在提交表单时显示，以便用户可以知道表单已被处理。我在网上搜索并找到了一些脚本，但似乎对我不起作用。所以如果我能得到一些帮助，我决定将我的HTML粘贴在这里

<form id="form5" name="form1" method="post" action="check.asp" target="_parent">
          <table width="270" border="0" cellpadding="4" cellspacing="4">
            <tr>
              <td colspan="2"><strong>Email</strong></td>
              </tr>
            <tr>
              <td colspan="2"><label for="textfield6"><span id="sprytextfield1"><span class="textfieldRequiredMsg">Enter your Email Address</span><span id="sprytextfield8">
                <input name="email" type="text" id="email" />
                <span class="textfieldRequiredMsg">Enter your Email</span></span></span></label></td>
  </tr>
            <tr>
              <td colspan="2"><strong>Password</strong></td>
              </tr>
            <tr>
              <td colspan="2"><label for="textfield7"><span id="sprytextfield2"><span class="textfieldRequiredMsg">Password is required</span><span id="sprytextfield9">
                <input name="password" type="text" class="round" id="password" />
                <span class="textfieldRequiredMsg">Enter your Password</span></span></span></label></td>
  </tr>
            <tr>
              <td>&nbsp;
                 <button  id="login">Login</button></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td width="127"><a href="#register">Register</a></td>
              <td width="122"><div align="right"><a href="#fpassword">Forgot Password</a></div></td>
            </tr>
            <tr>
              <td colspan="2"><img src="../imgs/loader.png" width="30" height="29" style="display:none" id="img"/>&nbsp;<div id="loading" style="display:none;"><img src="img/loader.png" alt="" />Loading!</div>
                <img src="../imgs/loader.png" width="30" height="29" /></td>
              </tr>
            </table>
          <table width="450" border="0" cellpadding="4" cellspacing="4">
            <tr> </tr>
            <tr> </tr>
          </table>
        </form>

Answer 1

根据您的评论，我知道您正在使用ajax进行表单提交。

在你的HTML中放置一个预加载器标记。 （在你的id="img"）图片中

然后使用此

$('#img')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;