悠悠楠杉
网站页面
页面加载时增加loading效果
09/20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
opacity: 1;
background: #f7f7f7;
}
#loading img {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
z-index: 999;
}
</style>
</head>
<body>
<div id="loading"><img src="loading.gif" id="loading"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if (document.readyState == "complete") {
$("#loading").animate({
"opacity": "0"
}, 500).hide(1000);
}
}
</script>
</body>
</html>
