web网页加载提示

小灰灰 2024-04-18 13:23 50阅读 0赞

作为一名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;

当然大家也可以自己去找一下动态的图片，这样也比较简单