Flask 加载页面加载图标
[英]Flask loading icon on page load
问题描述
from flask import Flask, render_template, Response, request, redirect, url_for app = Flask(__name__) app.config['TEMPLATES_AUTO_RELOAD'] = True @app.route("/", methods=["POST", "GET"]) def index(): if request.method == "POST": return render_template("index.html") if __name__ == '__main__': app.run(debug=True)
<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> div#loading { width: 50px; height: 50px; display: none; background: url('https://i.giphy.com/3oEjI6SIIHBdRxXI40.gif') center no-repeat; cursor: wait; padding-left:100%; } </style> </head> <body> <form method="POST"> <input type="text"> <button type="submit" onclick="loading();"> <div id="loading"></div> <div id="content"> <i class="fas fa-search"></i> </div> </button> </form> <script type="text/javascript"> function loading(){ $("#loading").show(); $("#content").hide(); } </script> </body> </html>
我正在构建一个 Flask 应用程序，当您按下按钮时，加载程序应该用加载 gif 替换搜索玻璃图标。
目前，单击按钮后未显示 gif。
当我从加载样式中删除display:none时，会出现 gif，所以我知道它就在那里。
2 个解决方案
解决方案1
0 2022-01-31 05:30:16
您正在使用 JQuery 来显示和隐藏元素，但您尚未将其包含在模板中。
所以包括一个脚本标签，如
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
在您引用 JQuery 的脚本标记之前
解决方案2
0 已采纳 2022-02-02 08:59:57
我想我已经有一个div id = content ，所以它正在删除整个 div。 记得检查你的身份证！
显示加载图标直到页面加载？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.