网页加载进度条

最新推荐文章于 2023-02-11 22:39:12 发布

weixin_33835103

最新推荐文章于 2023-02-11 22:39:12 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/TravellingKite/p/8596266.html

版权

网页加载进度条用于显示网页的加载行为或加载的进度，以提高用户体验。

原理

在进入网页的时候，显示一个固定定位的遮罩层。当页面加载完成的将其移除。

实现方案

基于事件

要实现这样的一个效果，我们就需要知道页面加载的进度以及何时完成。这时候我们可以使用 document. onreadystatechange 来侦测页面加载状态改变事件，通过 document. readyState 属性的值来判断页面处于加载的哪个状态。

document.readyState 属性有四个取值：

uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

document.onreadystatechange = function () {
    if ( document.readyState === 'complete' ) {
        // .loading 是遮罩层的 class
        $('.loading').fadeOut();
    }
}

基于页面执行顺序

在网页中，HTML 代码的执行顺序是从上往下顺序执行的，通过在页面的不同的位置插入 js 代码来修改遮罩层的一些数据（比如宽度，或者是数值）来达到动态显示加载状态的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <header>
        内容
    </header>
    <script type="text/javascript">
        $('.loading').animate({ width: '10%'}, 0.1);
    </script>
    <section>
        内容
    </section>
    <script type="text/javascript">
        $('.loading').animate({ width: '25%'}, 0.1);
    </script>
    <section>
        内容
    </section>
    <script type="text/javascript">
        $('.loading').animate({ width: '40%'}, 0.1);
    </script>
    <section>
        内容
    </section>
    <script type="text/javascript">
        $('.loading').animate({ width: '60%'}, 0.1);
    </script>
    <section>
        内容
    </section>
    <script type="text/javascript">
        $('.loading').animate({ width: '80%'}, 0.1);
    </script>
    <footer>
        内容
    </footer>
    <script type="text/javascript">
        $('.loading').animate({ width: '100%'}, 0.1);
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/TravellingKite/p/8596266.html

weixin_33835103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页加载进度条

网页加载进度条用于显示网页的加载行为或加载的进度，以提高用户体验。原理在进入网页的时候，显示一个固定定位的遮罩层。当页面加载完成的将其移除。实现方案基于事件要实现这样的一个效果，我们就需要知道页面加载的进度以及何时完成。这时候我们可以使用 document. onreadystatechange 来侦测页面加载状态改变事件，通过 document. readyState 属性的值来判断页...
复制链接

扫一扫