网页加载loading怎么使用
时间: 2023-03-23 15:01:55 浏览: 144
网页加载loading通常是通过CSS和JavaScript来实现的。一般的做法是,在HTML文件中添加一个隐藏的loading动画,当页面开始加载时,通过JavaScript将其显示出来,当页面加载完成后,通过JavaScript再将其隐藏起来。
具体实现方法如下:
1. 首先在HTML文件中添加一个loading的元素,可以是图片或者动画等。
2. 在CSS文件中,给loading元素添加样式,使其隐藏。
3. 在JavaScript文件中,使用window.onload方法来检测页面是否已经加载完成,如果没有加载完成,则将loading元素显示出来;如果已经加载完成,则将loading元素隐藏起来。
示例代码如下:
HTML文件:
```
<div id="loading">
<img src="loading.gif" alt="loading">
</div>
```
CSS文件:
```
#loading {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#loading img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
JavaScript文件:
```
window.onload = function() {
document.getElementById("loading").style.display = "none";
};
```
这样就可以在页面加载时显示loading动画,加载完成后自动隐藏。