版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Picking_up_stones/article/details/76597714
后来打开很多网页在导航栏顶部都有一个进度显示条,就在想如何显示进度呢?那样的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代码的位置,并根据内容的多少来确定进度条的长度,当然这只是一个模拟,不能反映页面的真实加载速度,但是只要断点设置合理,还是很有参考价值的。所以我们需要在使用中,针对自己的页面布局来设置适合页面的进度显示条。