loadpace/index.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>