loadpace/index.html

72 lines
2.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<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 id="loading">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 屏幕 -->
<div id="preloader"></div>
<!-- 页面加载进度 -->
<script src="src/pace.js"></script>
<!-- <script src="src/pacejs.js"></script> -->
<script>
// 页面加载进度条配置
paceOptions = {
ajax: true,
document: true,
trackWebSockets: false,
eventLag: false
};
// 网页加载结束后执行
Pace.on("done", function () {
console.log('paceDone')
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>