页面加载进度条加载完成后显示页面内容
发布时间：2022-02-14 09:11:40 所属栏目：经验 来源：互联网
导读：这篇文章主要为大家详细介绍了页面加载进度条加载完成后显示页面内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。 页面加载进度条加载完成后显示页面内容，很多时候需要给页面做个这样的效果，让页面整体看起来
|
这篇文章主要为大家详细介绍了页面加载进度条加载完成后显示页面内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。 页面加载进度条加载完成后显示页面内容，很多时候需要给页面做个这样的效果，让页面整体看起来更规范化，下面错新网给出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%{}} （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
