本文介绍如何设计一个全屏的Loading页面，并通过JavaScript控制其显示与隐藏。具体包括：使用100vh设置Loading页面的高度以实现全屏效果；在页面所有元素加载完成后隐藏Loading页面。
1.设计一个装载Loading页面的div
此处设置的height为100vh，vh单位表示浏览器的可视高度百分比，100vh表示浏览器高度的100%，如果是全屏Loading，则该div需要排在body标签中最前面。
<body>
<div id="loader" style="position: relative;width: 100%;height: 100vh">
<!--Loading页面-->
</div>
...
</body>
2.js脚本
使用$(window).on('load', function(){ });则等待所有元素加载完毕才隐藏loading页面。
<body>
...
<script>
$(window).on('load', function(){
$('#loader').hide(0);
});
</script>
...
</body>
3.Loading页面案例
一共十个demo，代码请见我的GitHub.
扫一扫
2363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
