首页代码如何flask框架get方法加载web页面时弹出等待框

代码如何flask框架get方法加载web页面时弹出等待框

时间: 2023-08-06 13:21:51 浏览: 39

您可以使用JavaScript和CSS来实现在加载页面时弹出等待框。具体实现步骤如下： 1. 在HTML文件中引入jQuery和一个用于显示等待框的CSS文件。 ```html <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" href="path/to/waiting.css"> </head> ``` 2. 在HTML文件中添加一个用于显示等待框的HTML代码。 ```html <div id="waiting"> <div class="waiting-content"> <i class="fa fa-spinner fa-spin"></i> Loading... </div> </div> ``` 3. 在CSS文件中定义等待框的样式。 ```css #waiting { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: none; } .waiting-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; font-size: 20px; } ``` 4. 在JavaScript文件中使用jQuery监听页面加载事件，并在事件触发时显示等待框。 ```javascript $(document).ready(function() { $('#waiting').show(); }); ``` 当页面加载完成后，等待框会自动隐藏。您可以根据实际需要进行修改。