【HTML】- 网页加载进度条

1.介绍

通过定时器制作进度条以及通过加载状态事件制作进度条，两者的区别在于通过定时器实现进度条，每次打开网页时进度条显示的时间一定，而通过加载状态事件制作进度条加载完全部内容后再显示内容，用户体验更好。

2.定时器制作进度条

2.1 html结构

<div id="progress">
    <div class="loading">
        <img src="../image/ic_loading.png" alt="loading">
    </div>
</div>
<div>
    <img src="http://pic.qiantucdn.com/58pic/11/31/58/97p58PICV26.jpg" alt="pic">
</div>

2.2 css样式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        margin: 20px auto;
        text-align: center;
        color: #222222;
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #progress{
        width: 100%;
        height: 100%;
        position: fixed;
        top:0;
        left: 0;
        z-index: 10;
        background-color: #ffffff;
    }
    #progress .loading{
        width: 53px;
        height: 53px;
        position: absolute;
        left: 0;
        top:0;
        bottom: 0;
        right: 0;
        margin: auto;
        overflow: hidden;
        animation: loading 1.0s infinite linear;
        -webkit-animation: loading 1.0s infinite linear;
    }
    @keyframes loading {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes loading {
        0%{
            -webkit-transform: rotate(0deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
        }
    }
</style>

2.3 javascript逻辑

window.onload = function () {
    /**
     * 通过定时器实现加载
     */
    var timer = null
    var progress = document.getElementById('progress');
    timer = setInterval(function () {
        progress.style.display = 'none'
    },2000)
}

3.通过加载状态事件制作进度条

3.0 加载状态事件

document.onreadystatechange 页面加载状态改变时的事件

document.readystate 返回页面当前文档的状态

有四种状态：

uninitialized - 还未开始载入

loading - 载入中

interactive - 已载入，文档与用户开始交互

complete - 载入完成

根据这四个状态我们可以通过载入完成后隐藏进度条，而显示内容。

3.1 html结构

<div id="progress">
    <div class="loading">
        <img src="../image/ic_loading.png" alt="loading">
    </div>
</div>
<div>
    <img src="http://pic.qiantucdn.com/58pic/11/31/58/97p58PICV26.jpg" alt="pic">
</div>

3.2 css样式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        margin: 20px auto;
        text-align: center;
        color: #222222;
        font-size: 12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #progress{
        width: 100%;
        height: 100%;
        position: fixed;
        top:0;
        left: 0;
        z-index: 10;
        background-color: #ffffff;
    }
    #progress .loading{
        width: 53px;
        height: 53px;
        position: absolute;
        left: 0;
        top:0;
        bottom: 0;
        right: 0;
        margin: auto;
        overflow: hidden;
        animation: loading 1.0s infinite linear;
        -webkit-animation: loading 1.0s infinite linear;
    }
    @keyframes loading {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes loading {
        0%{
            -webkit-transform: rotate(0deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
        }
    }
</style>

3.3 Javascript逻辑

document.onreadystatechange = function () {
    var progress = document.getElementById('progress');
    console.log(document.readyState)
    if (document.readyState == 'complete'){
        progress.style.display = 'none'
    }
}