javascript - 使用 jQuery 单击表单提交后显示加载 gif

Question

我试图在提交表单后简单地显示一个正在加载的 gif。我的代码无法正常显示正在加载的 gif。您会看到我的 gif 图片设置为 visibility: hidden。

<script src="js/jquery-1.11.1.min.js"></script>

<div class="" style="width: 480px; margin: 0 auto; margin-top: 20px;" id="form_wrapper">
    <img src="img/loader.gif" id="gif" style="display: block; margin: 0 auto; width: 100px; visibility: hidden;">
    <div class="fade" id="form">
        <form action="process_login.php" method="POST" name="simplelogin" id="login_form"><br />
            <label for="username">&nbsp; Username:</label>
            <input type="username" name="username" id="username" size="30" required><br><br>
            <label for="password">&nbsp; Password:</label>
            <input type="password" name="password" id="password" size="30" required><br><br>
            <input class="load_button" type="submit" name="submit" id="submit" value="Submit" placeholder="Submit">
        </form>
    </div>
</div>
<div class="fifty"></div>

<script type="text/javascript">
    $('.load_button').submit(function() {
        $('#gif').show(); 
        return true;
    });
</script>

Answer 1

show() 方法只影响 display CSS 设置。如果要设置可见性，则需要直接进行。此外，.load_button 元素是一个按钮，不会引发 submit 事件。您需要将选择器更改为 form 才能正常工作:

$('#login_form').submit(function() {
    $('#gif').css('visibility', 'visible');
});

另请注意，return true; 在您的逻辑中是多余的，因此可以将其删除。