loading界面的样式写在</head>前，优先渲染这个界面
<head>
<title>loading</title>
<style type="text/css">
#loader{
width: 100%;height: 100%;background: white;
position: fixed;top: 0;left: 0;/*相对浏览器窗口定位*/
display: flex;align-items: center;justify-content: center;/*内容水平垂直居中*/
}
</style>
</head>
<body>
<div id="loader"><!--遮罩层-->
<img src="img/load.gif" ><!--loading效果-->
</div>
<div id="container">页面加载完成</div><!--页面正式内容-->
</body>
利用js的onload()在页面加载完所有资源（包括图片、视频等资源）后才执行的特性来关闭遮罩层
window.onload = function(){
setTimeout(close,500)//加载太快有时候看不到loding界面所以加个延时
function close(){
$('#loader').hide()
}
}
jq的写法：window.onload = function(){} 等同$(function(){})
$(function(){
setTimeout(close,500)
function close(){
$('#loader').hide()
}
})
1040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
