JavaScript实现浏览器顶部的进度显示条

最新推荐文章于 2023-10-23 22:18:53 发布

塞上江南果

最新推荐文章于 2023-10-23 22:18:53 发布

阅读量3k

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/Picking_up_stones/article/details/76597714

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

后来打开很多网页在导航栏顶部都有一个进度显示条，就在想如何显示进度呢？那样的JS要如何写？如何知道网页加载到哪了呢？就上网搜了下如何实现，发现实现的思路很巧妙，今天来简单的总结下。

一. 原理

原理特别简单，我想知道浏览器是如何解析并渲染网页的都知道，HTML文档的代码是按照出现的顺序，从上往下一条一条的执行的。所以我们就可以根据网页代码执行的顺序在合适的位置加上JS代码，去控制进度条的长度变化就可以了。

二. 实现代码

<!DOCTYPE html>
<html>
<head>
    <title>网页进度条</title>
    <style type="text/css">

        html, body{
            margin: 0;
            padding: 0;
        }
        .loadbar{
            background-color: skyblue;
            height: 5px;
        }

    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="loadbar"></div>

<nav>导航栏：10%</nav> 
<script type="text/javascript">
    $('.loadbar').animate({'width':'10%'},100); 
</script>

<aside>左侧边栏：20%</aside>
<script type="text/javascript">
    $('.loadbar').animate({'width':'30%'},100); 
</script>

<article>主体：40%</article>
<script type="text/javascript">
    $('.loadbar').animate({'width':'70%'},100); 
</script>

<aside>右侧边栏：20%</aside>
<script type="text/javascript">
    $('.loadbar').animate({'width':'90%'},100); 
</script>

<footer>页脚：10%</footer>
<script type="text/javascript">
    $('.loadbar').animate({'width':'100%'},100); 
</script>

<script type="text/javascript">

//页面资源加载完毕后清除动画
$().ready(function(){ 
    $('.loadbar').fadeOut();  
});



</script>

</body>
</html>

在代码中使用jQuery去控制进度条动画，可以看出是根据页面的内容分布来控制添加JS代码的位置，并根据内容的多少来确定进度条的长度，当然这只是一个模拟，不能反映页面的真实加载速度，但是只要断点设置合理，还是很有参考价值的。所以我们需要在使用中，针对自己的页面布局来设置适合页面的进度显示条。

塞上江南果

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript实现浏览器顶部的进度显示条

后来打开很多网页在导航栏顶部都有一个进度显示条，就在想如何显示进度呢？那样的JS要如何写？如何知道网页加载到哪了呢？就上网搜了下如何实现，发现实现的思路很巧妙，今天来简单的总结下。一. 原理原理特别简单，我想知道浏览器是如何解析并渲染网页的都知道，HTML文档的代码是按照出现的顺序，从上往下一条一条的执行的。所以我们就可以根据网页代码执行的顺序在合适的位置加上JS代码，去控制进度条的长度变化就可以了
复制链接

扫一扫

专栏目录