封装个loading图解决首屏加载白屏的问题的详细思路和代码
时间: 2024-05-05 11:22:43 浏览: 6
当页面内容较多或需要加载大量资源时,页面加载时间会变长,导致用户看到白屏时间变长,影响用户体验。为了解决这个问题,我们可以封装一个loading图来提示用户页面正在加载中。
下面是实现的详细思路和代码:
1. 创建一个loading图的HTML结构,可以使用CSS或者图片实现,也可以使用第三方库如Spin.js等。
```html
<div class="loading">
<div class="loading-spinner"></div>
</div>
```
2. 使用CSS对loading图进行样式设置,使其居中并在页面加载完成前显示出来。
```css
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
z-index: 9999;
}
.loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #ccc;
border-top-color: #ff6a00;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
```
3. 在页面加载完成后隐藏loading图。可以使用window.onload或者jQuery中的$(document).ready()方法来实现。
```js
window.onload = function() {
document.querySelector('.loading').style.display = 'none';
}
```
4. 将loading图的代码封装成一个函数,方便在各个页面中调用。
```js
function showLoading() {
const loading = document.createElement('div');
loading.className = 'loading';
loading.innerHTML = '<div class="loading-spinner"></div>';
document.body.appendChild(loading);
}
function hideLoading() {
const loading = document.querySelector('.loading');
loading.parentNode.removeChild(loading);
}
```
通过这种方式,我们可以在页面加载过程中显示loading图,使用户感知到页面正在加载,并在页面加载完成后隐藏loading图。这样可以提高用户体验,减少用户的等待时间。