cloud
/
loadpace
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

JQ片段改为JS原生写法

This commit is contained in:
cloud 2022-09-01 19:15:41 +08:00
parent ef1f3b87b0
commit 0cfe2040e7
3 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@ -2,17 +2,20 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>页面加载进度效果</title> <title>页面加载进度效果</title>
<link rel="stylesheet" href="src/root.css"> <link rel="stylesheet" href="src/root.css">
<link rel="stylesheet" href="src/pace.css"> <link rel="stylesheet" href="src/pace.css">
<link rel="stylesheet" href="src/preloader.css"> <link rel="stylesheet" href="src/preloader.css">
<link rel="stylesheet" href="src/loading.css"> <link rel="stylesheet" href="src/loading.css">
<link rel="stylesheet" href="src/index.css"> <link rel="stylesheet" href="src/index.css">
</head> </head>
<body> <body>
<!-- LOGO --> <!-- LOGO -->
<div class="loading"> <div id="loading">
<span>网</span> <span>网</span>
<span>塔</span> <span>塔</span>
<span>科</span> <span>科</span>
@ -22,32 +25,48 @@
<!-- 屏幕 --> <!-- 屏幕 -->
<div id="preloader"></div> <div id="preloader"></div>
<script src="src/jquery-3.6.0.js"></script>
<!-- 处理JQ3.0版本兼容 -->
<script src="src/jquery-migrate-3.4.0.min.js"></script>
<!-- 页面加载进度 --> <!-- 页面加载进度 -->
<script src="src/pace.js"></script> <script src="src/pace.js"></script>
<!-- <script src="src/pacejs.js"></script> -->
<script> <script>
// 延时看效果 time = ？秒
$.get("http://wtkj.qiyejianzhan.wang/dtest.php?time=3", function (data) {
console.log(data);
});
// 页面加载进度条配置 // 页面加载进度条配置
paceOptions = { paceOptions = {
ajax: true, ajax: true,
document: true, document: true,
trackWebSockets: false,
eventLag: false eventLag: false
}; };
// 网页加载结束后执行 // 网页加载结束后执行
Pace.on("done", function () { Pace.on("done", function () {
console.log('paceDone') console.log('paceDone')
$('#preloader').addClass("isdone"); document.getElementById('preloader').classList.add("isdone");
$('.loading').addClass("isdone"); document.getElementById('loading').classList.add("isdone");
}); });
// 延时看效果 time = ？秒
// 第一步： 获得XMLHttpRequest对象
var ajax = new XMLHttpRequest();
// 第二步： 设置状态监听函数
ajax.onreadystatechange = function () {
console.log(ajax.readyState);
console.log(ajax.status);
// 第五步：在监听函数中，判断readyState=4 && status=200表示请求成功
if (ajax.readyState === 4 && ajax.status === 200) {
// 第六步： 使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示
console.log(ajax.responseText);
// console.log(ajax.responseXML);// 返回不是XML，显示null
// console.log(JSON.parse(ajax.responseText));
// console.log(eval("(" + ajax.responseText + ")"));
}
}
// 第三步： open一个链接
// ajax.open("GET", "http://wtkj.qiyejianzhan.wang/dtest.php?time=5", false);//true异步请求，false同步
// 第四步： send一个请求。 可以发送对象和字符串，不需要传递数据发送null
// ajax.send(null);
</script> </script>
</body> </body>
</html> </html>

20
src/loading.css
View File

@ -1,4 +1,4 @@
.loading { #loading {
position: fixed; position: fixed;
left: 50%; left: 50%;
top: calc(50% - 40px); top: calc(50% - 40px);
@ -13,7 +13,7 @@
color: #ffffff; color: #ffffff;
} }
.loading.isdone { #loading.isdone {
top: 50%; top: 50%;
opacity: 0; opacity: 0;
-webkit-transition: all .8s; -webkit-transition: all .8s;
@ -24,42 +24,42 @@
transition-delay: .5s; transition-delay: .5s;
} }
.loading span { #loading span {
-webkit-animation: loading 1.4s infinite alternate; -webkit-animation: loading 1.4s infinite alternate;
animation: loading 1.4s infinite alternate; animation: loading 1.4s infinite alternate;
} }
.loading span:nth-child(1) { #loading span:nth-child(1) {
-webkit-animation-delay: 0s; -webkit-animation-delay: 0s;
animation-delay: 0s; animation-delay: 0s;
} }
.loading span:nth-child(2) { #loading span:nth-child(2) {
-webkit-animation-delay: 0.1s; -webkit-animation-delay: 0.1s;
animation-delay: 0.1s; animation-delay: 0.1s;
} }
.loading span:nth-child(3) { #loading span:nth-child(3) {
-webkit-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;
animation-delay: 0.2s; animation-delay: 0.2s;
} }
.loading span:nth-child(4) { #loading span:nth-child(4) {
-webkit-animation-delay: 0.3s; -webkit-animation-delay: 0.3s;
animation-delay: 0.3s; animation-delay: 0.3s;
} }
.loading span:nth-child(5) { #loading span:nth-child(5) {
-webkit-animation-delay: 0.4s; -webkit-animation-delay: 0.4s;
animation-delay: 0.4s; animation-delay: 0.4s;
} }
.loading span:nth-child(6) { #loading span:nth-child(6) {
-webkit-animation-delay: 0.5s; -webkit-animation-delay: 0.5s;
animation-delay: 0.5s; animation-delay: 0.5s;
} }
.loading span:nth-child(7) { #loading span:nth-child(7) {
-webkit-animation-delay: 0.6s; -webkit-animation-delay: 0.6s;
animation-delay: 0.6s; animation-delay: 0.6s;
} }

3
src/pace.js
View File

@ -38,6 +38,8 @@
}; };
}; };
// 默认配置
defaultOptions = { defaultOptions = {
className: '', className: '',
catchupTime: 100, catchupTime: 100,
@ -71,6 +73,7 @@
return (_ref = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref : +(new Date); return (_ref = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref : +(new Date);
}; };
// 动画
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;