进度条（二）

最新推荐文章于 2024-06-16 15:09:53 发布

xiaojinging

最新推荐文章于 2024-06-16 15:09:53 发布

阅读量146

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaojinging/article/details/82590391

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

通过加载状态事件制作进度条（简易）：

当内容真正加载完毕，再来显示内容，这里用到两个事件document.onreadystatechange和document.readyState

readyState的四个状态：

1、uninitialized 还未开始载入

2、loading 加载中

3、interactive 已加载，文档与用户可以开始交互

4、complete 加载完成

这里我们只用到最后一个complete状态来制作一个简易的进度条

HTML代码展示：

<div class="loading">
        <div class="pic"></div>
</div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414436&di=c5bbeee3bdc659ae2050f2d3825e6162&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F58ab9fe75f357.jpg">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=cba77152deeaabd6a6608be473868f3d&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58797c1671855.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=002fb85a1bfd249ab15bab9625f1f45b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F58a2c3ea3d8bc.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=0bae00ae7b519b1a6ed6118e3fc88876&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F586db441b1847.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=d5c8d6d253d0522d515e9afd3e6920d3&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F587596e18d61e.jpg" alt="">

css代码：

<style>
        .loading {
            width:100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: #ffffff;
            z-index:100;
        }
        .loading .pic {
            background: url("img/loading.gif") no-repeat;
            width: 64px;
            height: 64px;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom: 0;
            margin:auto;
        }
</style>

引入jQuery

js代码：

<script>
        document.onreadystatechange = function(){//页面加载状态改变时的事件
//            console.log(document.readyState);
            if(document.readyState == "complete"){//如果文档已加载完成就让loading隐藏掉
                $(".loading").fadeOut();//fadeOut();淡出事件
            }
        }
</script>