跳转到主内容
极星编程网:以代码为星,赴技术山海!

如何在进度条加载后显示页面

1.思路:加入很多图片,以延迟加载时间,实现加载完后显示图片。定义一个外层p,覆盖住图片,在内层p中引入加载时显示的图片,让内层p居中在页面上,利用setinterval定时器设置3秒后将外层p隐藏,从而显示图片,达到加载完后显示页面的效果。
知识点: p居中:
position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
2. 思路:利用状态事件监听的方法:onreadystatechange,判断redayState,实现加载完后显示页面的效果

知识点: 通过onreadystatechange事件监听readyState的状态,我们只需要关心最后一个状态'complete',当达到complete状态,说明加载成功。 3. 思路:利用CSS3实现动画效果,达到加载 完后显示页面。同样采用onreadystatechange事件监听的方法,不同的是实现了一种动态效果。 利用i标签,加入CSS样式,实现5个间隔开的矩形。利用animation每隔1.2s循环一次,无限循环。每个i标签,延时0.1s在Y方向上伸长缩短,达到动画效果。

知识点: 1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。 2.infinite:无限循环 3.animate-delay:0.1s  延时0.1s 4.@keyframes 动画名称{ 0%{ } 100%{ } }

相关文章