72 lines
2.2 KiB
HTML
72 lines
2.2 KiB
HTML
<!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> |