页面加载进度条加载完成后显示页面内容

2020-07-03 12:44:42

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了页面加载进度条加载完成后显示页面内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

页面加载进度条加载完成后显示页面内容，很多时候需要给页面做个这样的效果，让页面整体看起来更规范化，下面错新网给出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%{}}

以上就是页面加载进度条加载完成后显示页面内容的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持错新网。

上一篇：搜索引擎“眼中”的状态码503与404区别

下一篇：@media移动端自适应样式的使用方法介绍