js 如何显示页面正在记载中 是的整个界面变色灰色不可操作 直到加载完成 图形是加载图形
时间: 2024-03-08 14:47:42 浏览: 26
可以通过以下步骤实现该功能:
1. 创建一个遮罩层,将其设置为半透明黑色,使得页面变灰并且不可操作。
2. 在遮罩层中心添加一个加载图形,可以使用 GIF 图片或者 CSS 动画实现。
3. 在页面加载完成后,移除遮罩层。
以下是一个简单的实现示例:
HTML 代码:
```html
<div id="loading-mask">
<div class="loading-spinner"></div>
</div>
<!-- 页面内容 -->
<div id="page-content">
<!-- ... -->
</div>
```
CSS 代码:
```css
#loading-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 添加 loading 图形,这里使用了 CSS 动画 */
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
/* CSS 动画 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 隐藏页面内容,等待加载完成后再显示 */
#page-content {
display: none;
}
```
JavaScript 代码:
```javascript
// 监听页面加载完成事件
window.addEventListener('load', function() {
// 移除遮罩层
document.querySelector('#loading-mask').remove();
// 显示页面内容
document.querySelector('#page-content').style.display = 'block';
});
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)