|
|
@ -2,17 +2,20 @@ |
|
|
|
<html lang="en"> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> |
|
|
|
|
|
|
|
<title>页面加载进度效果</title> |
|
|
|
<link rel="stylesheet" href="src/root.css"> |
|
|
|
<link rel="stylesheet" href="src/pace.css"> |
|
|
|
<link rel="stylesheet" href="src/preloader.css"> |
|
|
|
<link rel="stylesheet" href="src/loading.css"> |
|
|
|
<link rel="stylesheet" href="src/index.css"> |
|
|
|
|
|
|
|
</head> |
|
|
|
<body> |
|
|
|
|
|
|
|
<!-- LOGO --> |
|
|
|
<div class="loading"> |
|
|
|
<div id="loading"> |
|
|
|
<span>网</span> |
|
|
|
<span>塔</span> |
|
|
|
<span>科</span> |
|
|
@ -22,32 +25,48 @@ |
|
|
|
<!-- 屏幕 --> |
|
|
|
<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/pacejs.js"></script> --> |
|
|
|
<script> |
|
|
|
|
|
|
|
// 延时看效果 time = ?秒 |
|
|
|
$.get("http://wtkj.qiyejianzhan.wang/dtest.php?time=3", function (data) { |
|
|
|
console.log(data); |
|
|
|
}); |
|
|
|
|
|
|
|
// 页面加载进度条配置 |
|
|
|
paceOptions = { |
|
|
|
ajax: true, |
|
|
|
document: true, |
|
|
|
trackWebSockets: false, |
|
|
|
eventLag: false |
|
|
|
}; |
|
|
|
|
|
|
|
// 网页加载结束后执行 |
|
|
|
Pace.on("done", function () { |
|
|
|
console.log('paceDone') |
|
|
|
$('#preloader').addClass("isdone"); |
|
|
|
$('.loading').addClass("isdone"); |
|
|
|
document.getElementById('preloader').classList.add("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> |
|
|
|
</body> |
|
|
|
</html> |