1.思路：加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层p，覆盖住图片，在内层p中引入加载时显示的图片，让内层p居中在页面上，利用setinterval定时器设置3秒后将外层p隐藏，从而显示图片，达到加载完后显示页面的效果。
nbsp;html>.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;}@@##@@@@##@@@@##@@@@##@@@@##@@$(function(){var loading=' ';$('body').append(loading);setInterval(function(){$('.loading').fadeOut();},3000)})
登录后复制
知识点：
p居中：
position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
登录后复制
2.
思路：利用状态事件监听的方法：onreadystatechange，判断redayState，实现加载完后显示页面的效果
nbsp;html>.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;}@@##@@@@##@@@@##@@@@##@@@@##@@document.onreadystatechange=function(){if(document.redayState=='complete'){$('loading').fadeOut();}}
登录后复制
知识点：
通过onreadystatechange事件监听readyState的状态，我们只需要关心最后一个状态’complete’，当达到complete状态，说明加载成功。
3.
思路：利用CSS3实现动画效果，达到加载 完后显示页面。同样采用onreadystatechange事件监听的方法，不同的是实现了一种动态效果。
利用i标签，加入CSS样式，实现5个间隔开的矩形。利用animation每隔1.2s循环一次，无限循环。每个i标签，延时0.1s在Y方向上伸长缩短，达到动画效果。
nbsp;html>.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);}} @@##@@@@##@@@@##@@@@##@@@@##@@document.onreadystatechange=function(){if(document.redayState=='complete'){$('loading').fadeOut();}}
登录后复制
知识点：
1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。
2.infinite:无限循环
3.animate-delay:0.1s 延时0.1s
4.@keyframes 动画名称{
0%{
}
100%{
}
}
以上就是如何在进度条加载后显示页面的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3122068.html
