首页
视频
资源
登录
原
避免页面加载的时候出现空白页
3761
人阅读
2020/6/11 23:20
总访问:
524346
评论:
0
收藏:
0
手机
分类:
前端
在html页面未加载完成时会有一段空白,为了增强用户体验的话,需要在未加载完成时实现加载效果。 code: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>loading动画</title> <!--loading style--> <style> .loading{ width: 100px; height: 100px; /*border: 1px solid red;*/ position: relative; } .loading::before,.loading::after{ content: ''; /*这里要加一个content,不然什么都没有*/ position: absolute; width: 0; height: 0; background: #000; border-radius: 50%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; animation: toBig 1s linear infinite; } .loading::after{ animation-delay: 0.5s; /*background-color: red;*/ } @keyframes toBig { 0%{ width: 0; height: 0; opacity: 1; } 100%{ width: 50px; height:50px; opacity: 0; } } </style> <style> .site-welcome{ display: none; justify-content:center; align-items:center; /*里面内容居中使用flex在父元素添加三行代码display:flex;justify-content:center; align-items:center;*/ position: fixed; top: 0; left: 0; width: 100%; height: 100%; /*上面四行代码,让这个fixed铺满整个画面,下面的背景色可以不要,不然每次加载都有这个遮罩层的背景一闪而已影响用户体验*/ background-color: #ccc; z-index: 1; } .site-welcome.active{ display:flex; } </style> </head> <body> <div class="site-welcome active" id="siteWelcome"> <div class="loading"> </div> </div> <script> //当代码加载到这里的时候,执行这个script,当代码加载到这里,说明loading该结束了 window.onload=function(){ var siteWelcome = document.getElementById('siteWelcome'); siteWelcome.classList.remove('active'); } </script> </body> </html> ``` 遮罩层的z-index可以根据实际情况设定 遮罩层的背景颜色可以去掉,不然页面每次打开的时候都有一个遮罩层的背景色一闪而过,虽然感觉还是有点影响用户体验
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
只若初见
如果有缘,错过了还会重来,如果无缘,相遇了也会离开
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
架构
9篇
后端
3篇
.net
8篇
前端
52篇
nginx
1篇
.net core
6篇
EF
5篇
随笔
8篇
数据库
9篇
k8s
0篇
consul
1篇
git
1篇
uniapp
3篇
mysql
1篇
linux
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术