web网页加载圈之入门篇

web网页加载圈之入门篇

作为一名web开发者,或多或少都会接触到网页加载圈这个概念。一个网站的加载速度或快或慢,而慢的网页加载速度会给用户非常差的体验,这个时候如果不给用户一点提示信息,那简直糟糕透了。因此,常见的做法,是在页面加载完成之前,给一个过渡效果。那么怎么实现这种效果呢?

如何知道网页加载完成

DOM给我们提供了这样一个方法document.onreadystatechange。当一个文档的readyState属性发生更改时,readystatechange事件会被触发。document.readyState有两个值,interactive和complete。interactive状态表示文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。complete状态则表示页面加载结束。那么我们可以在页面上写一个提示信息,当document.readyState变为complete状态就隐藏这个提示,这样就可以达到一个过渡的效果了。

文字提示效果

我们从最简单的开始,可以给用户一个文字提示,比如“Loading…”。那么代码怎么写呢?

绘制加载提示

第一步,在body中绘制加载提示。

1
<div id="loading">Loading...</div>

第二步,给提示内容一个居中的样式效果。在style标签中写样式

1
2
3
4
5
6
7
#loading {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
}

打开该html页面,我们可以看到初步的效果。

根据状态隐藏提示

利用document.onreadystatechange方法监听页面加载状态,当document.readyState变为complete状态就隐藏加载提示。加入script标签,写入以下代码。

1
2
3
4
5
6
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
var loadingElement = document.getElementById('loading');
loadingElement.parentNode.removeChild(loadingElement);
}
};

刷新html页面,我们可以看到,当页面加载完成时,提示内容自动消失了。(由于资源缓存的关系,第二次的效果不会太明显,可以清空缓存观察效果。)

图片加载效果

网上有很多加载圈的gif图片,将上述文字内容换成gif图片就可以做到。也可以使用静态图片,然后通过css3动画来做一些加载效果,如rotate旋转。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#loading {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
background: url(loading.jpg) center center no-repeat;
background-size: 100% 100%;
animation: rotate 1.5s ease-out infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

css3自定义加载效果

其实我们可以利用CSS3自定义加载效果,把我们想要的效果通过动画做出来即可。下面我们来实现一个圆弧加载效果。只要将背景图换成box-shadow效果即可。

1
2
3
border-radius: 50%;
box-shadow: 2px 0 black;
animation: rotate 1.5s ease-out infinite;

这是我做的加载圈的效果页面,请点击查看


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

# demo

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×