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

来源：互联网发布：河南统计网络直报平台编辑：程序博客网时间：2024/05/29 14:32

后来打开很多网页在导航栏顶部都有一个进度显示条，就在想如何显示进度呢？那样的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