获取预加载器以在按钮单击时显示

Posted 2023-03-25

【中文标题】获取预加载器以在按钮单击时显示

【英文标题】：Get preloader to show on button click

【发布时间】：2021-05-18 15:42:44

【问题描述】：

当我的后端加载很长时间时，我想要一个预加载器，这就是我所做的：

    <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>

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

谢谢

【问题讨论】：

所以用 css 隐藏它....

先用css隐藏？

您并没有真正提供太多来展示您尝试做的事情。这只是一个包含您的代码的帖子，以及为您提供答案的礼貌请求（缺少最后的标点符号），仅此而已。 Stack Overflow 不是解决问题的服务；它是一个交流知识的网站。提供一些你的，社区会回复他们的。

【参考方案1】：

您的form 没有createReport 的id，因此您的.submit 处理程序不会运行，因为没有项目匹配该选择器。

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

img.loaderimg  display:none; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='#' method='post' id="createReport">
        <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>
        $("#createReport").submit(function (event) 
        $("img.loaderimg").show(); 
        event.preventDefault(); 
    );
    </script>

【讨论】：

非常感谢，唯一的问题是当我单击按钮时，它并没有像以前那样做它不与我的后端“对话”。唯一发生的是加载 gif 显示。我正在使用烧瓶也许与此有关。关于为什么会发生这种情况的任何想法

你的后端到底应该做什么？从您共享的代码来看，它只应该显示加载 gif。并且由于您的操作属性为空，因此不应执行任何操作。

基本上，我使用 Flask 来获取单击按钮时文本框中的内容，并将文本用作 python 函数的参数

我消除了阻止默认值并且它起作用了

【参考方案2】：

将style = "display:none" 属性添加到您的图像，它应该隐藏它，除非show() 函数应用于它。