代码如何flask框架get方法加载web页面时弹出等待框
时间: 2023-08-06 13:21:51 浏览: 83
您可以使用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();
});
```
当页面加载完成后,等待框会自动隐藏。您可以根据实际需要进行修改。
阅读全文