一旦页面的载入进度条被覆盖便可以展示其内容

发布时间：2023-10-25 14:12:56 所属栏目：经验来源：

导读： 页面加载进度条加载完成后显示页面内容，很多时候需要给页面做个这样的效果，让页面整体看起来更规范化，下面错新网给出3个思路来实现页面加载进度条加载完成后显示页面内容。

思路一、加入很多图片，以延迟加

页面加载进度条加载完成后显示页面内容，很多时候需要给页面做个这样的效果，让页面整体看起来更规范化，下面错新网给出3个思路来实现页面加载进度条加载完成后显示页面内容。

思路一、加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层DIV，覆盖住图片，在内层DIV中引入加载时显示的图片，让内层DIV居中在页面上，利用setInterval定时器设置3秒后将外层DIV隐藏，从而显示图片，达到加载完后显示页面的效果。

<!DOCTYPE html><html><head><title></title><style type="text/css">.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}.loading .pic{width: 64px;height: 64px;background: url(loading.gif);position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style></head><body><img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg"><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">$(function(){var loading='<div class="loading"><div class="pic"></div></div>';$('body').append(loading);setInterval(function(){$('.loading').fadeOut();},3000)})</script></body></html>

这里需要注意的知识点 DIV居中：

position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;

思路二、利用状态事件监听的方法：onreadystatechange，判断redayState，实现加载完后显示页面的效果

<!DOCTYPE html><html><head><title></title><style type="text/css">.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}.loading .pic{width: 64px;height: 64px;background: url(loading.gif);position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style></head><body> <div class="loading"><div class="pic"></div></div><img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg"><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">document.onreadystatechange=function(){if(document.redayState=='complete'){$('loading').fadeOut();}}</script></body></html>

这个一方法的知识点是：通过onreadystatechange事件监听readyState的状态，我们只需要关心最后一个状态'complete'，当达到complete状态，说明加载成功。

思路三、利用CSS3实现动画效果，达到加载完后显示页面。同样采用onreadystatechange事件监听的方法，不同的是实现了一种动态效果。

利用i标签，加入CSS样式，实现5个间隔开的矩形。利用animation每隔1.2s循环一次，无限循环。每个i标签，延时0.1s在Y方向上伸长缩短，达到动画效果。

<!DOCTYPE html><html><head><title></title><style type="text/css">.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 100;background: #fff;}.loading .pic{width: 50px;height: 50px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}.loading .pic i{display: block;float: left;width: 6px;height: 50px;background: #399;margin: 0 2px;-webkit-transform: scaleY(0.4); -ms-transform: scaleY(0.4); transform: scaleY(0.4);-webkit-animation: load 1.2s infinite; animation: load 1.2s infinite;}.loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s; animation-delay: 0.1s;}.loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s; animation-delay: 0.2s;}.loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s; animation-delay: 0.3s;}.loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s; animation-delay: 0.4s;}@-webkit-keyframes load{0%,40%,100%{-webkit-transform: scaleY(0.4); transform: scaleY(0.4);}20%{-webkit-transform: scaleY(1); transform: scaleY(1);}}@keyframes load{0%,40%,100%{-webkit-transform: scaleY(0.4); transform: scaleY(0.4);}20%{-webkit-transform: scaleY(1); transform: scaleY(1);}}</style></head><body> <div class="loading"><div class="pic"><i></i><i></i><i></i><i></i><i></i></div></div><img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg"><script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">document.onreadystatechange=function(){if(document.redayState=='complete'){$('loading').fadeOut();}}</script></body></html>

这一思路需要注意的知识点：

1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。

2.infinite:无限循环

3.animate-delay:0.1s 延时0.1s

4.@keyframes 动画名称{

0%{}

100%{}}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!