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.