页面加载进度条加载完成后显示页面内容,很多时候需要给页面做个这样的效果,让页面整体看起来更规范化,下面错新网给出3个思路来实现页面加载进度条加载完成后显示页面内容。
思路一、加入很多图片,以延迟加载时间,实现加载完后显示图片。定义一个外层DIV,覆盖住图片,在内层DIV中引入加载时显示的图片,让内层DIV居中在页面上,利用setInterval定时器设置3秒后将外层DIV隐藏,从而显示图片,达到加载完后显示页面的效果。
这里需要注意的知识点 DIV居中:
position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;
思路二、利用状态事件监听的方法:onreadystatechange,判断redayState,实现加载完后显示页面的效果
这个一方法的知识点是:通过onreadystatechange事件监听readyState的状态,我们只需要关心最后一个状态'complete',当达到complete状态,说明加载成功。
思路三、利用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%{}}
以上就是页面加载进度条加载完成后显示页面内容的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持错新网。
评论列表()