Javascript 获取要在按钮单击时显示的预加载程序

当我的后端加载很长时间时，我希望有一个预加载程序，这就是我所做的：

    <form action='#' method='post'>
        <br>
        <br>
        <p class='recP'>What have you watched?</p>
            <p><input class='BigBox' type='text' name ='animeChoice' placeholder='Type here...' /></p>
            <p class="howManyTxt"> How many animes do you want recommended?</p>
            <div class='Form'>
                <p><input class='numBox' type='number' name = 'howMany' placeholder='0'></p>
                <p><input class='subBox' type='submit' value='Submit'/></p>
            </div>
    </form>
    <img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" class="loaderimg" />
    <script type="text/javascript">
        $("#createReport").submit(function (event) {
        $("img.loaderimg").show(); 
        event.preventDefault(); 
    });
    </script>
</body>

你看了什么


您希望推荐多少部动画


$（“#createReport”）.submit（函数（事件）{
$（“img.loaderimg”）.show（）；
event.preventDefault（）；
});

gif总是显示，我希望它只在单击时显示

---

谢谢你

你的

表单

没有

id

的

createReport

，因此你的

.submit

处理程序不会运行，因为没有与该选择器匹配的项

此外，您需要将图像设置为默认隐藏，这是一个简单的CSS选择器可以做到的

img.loaderimg{display:none；}

你看了什么


您希望推荐多少部动画


$（“#createReport”）.submit（函数（事件）{
$（“img.loaderimg”）.show（）；
event.preventDefault（）；
});

将

style=“display:none”

属性添加到您的图像中，它应该将其隐藏，除非对其应用了

show（）

函数。

所以使用css隐藏它……首先使用css隐藏它？您并没有提供太多内容来显示您尝试做的事情。这只是一篇写有你的代码的帖子，一个礼貌的请求（缺少最后的标点符号）为你提供答案，仅此而已。堆栈溢出不是解决问题的服务；这是一个交流知识的场所。提供一些你的，社区会回复他们的。非常感谢你，唯一的问题是当我点击按钮时，它不会像以前那样做，它不会与我的后端“对话”。唯一发生的事情是加载的gif显示出来。我用的是烧瓶，可能和这个有关。你知道为什么会这样吗？你的后端到底应该做什么？根据您共享的代码判断，它只应该显示加载的gif。因为你的action属性是空的，所以它不应该做任何事情。基本上，我使用Flask来获取文本框中的内容，当点击按钮时，文本被用作python函数的参数。我删除了prevent默认值，它就工作了