web网页加载圈之入门篇

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

如何知道网页加载完成

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

文字提示效果

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

绘制加载提示

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

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

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

#loading {
	position: absolute;
	width: 50px;
	height: 50px;
	left: 50%;
	top: 50%;
}

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

根据状态隐藏提示

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

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    var loadingElement = document.getElementById('loading');
    loadingElement.parentNode.removeChild(loadingElement);
  }
};

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

图片加载效果

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

#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效果即可。

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

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

发布了98 篇原创文章 · 获赞 41 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览