JavaScript页面加载进度条

来源：互联网发布：java核心技术卷2 编辑：程序博客网时间：2024/06/06 08:56

目前没有任何浏览器可以直接获取正在加载对象的大小，因此我们只能采取迂回战术，利用浏览器DOM加载的方式去模拟实现页面加载进度
代码如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">    <title>JavaScript页面加载进度条</title>    <style type="text/css">    img{        width: 100px;        height: 66px;    }    img:hover{        box-shadow: 2px 3px 1px -3px black;    }    .progess{        height: 2px;        width: auto;        background-color: red;        position: absolute;        top: 0;        left: 0;    }    </style>    <script type="text/javascript" src="jquery-2.0.3.js"></script></head><body><div class="progess"></div><div class="wrap-all">    <div class="head">            <script type="text/javascript">                $(".progess").animate({width:"10%"},50)            </script>        <div class="main-head">        <!-- CSDN加载页面 -->            <iframe width='738' height='523' class='preview-iframe' scrolling='no' frameborder='0' src='http://download.csdn.net/source/preview/9883977/17e3567dce83bff3bda370affbf19024' ></iframe>            <script type="text/javascript">                $(".progess").animate({width:"33%"},50)            </script>            <script type="text/javascript">                for(var i=0;i<100000;i++){                    j += i;                }            </script>        </div>        <div class="second-head">            <img src="1.jpg">            <img src="2.jpg">            <img src="3.jpg">            <img src="4.jpg">            <img src="5.jpg">            <img src="6.jpg">        </div>        <script type="text/javascript">                $(".progess").animate({width:"76%"},50)            </script>        <div>            <pre>                JavaScript之Function函数函数是对象！JavaScript（简称js）中不存在类和接口这种数据结构，所以ES使用引用类型这种数据结构来代替类（两者很相似，但并不同）。引用类型的值（对象）是引用类型的实例。因为Function是引用类型，而每个函数又都是Function的实例，由此，我们可以推论出            </pre>        </div>        <script type="text/javascript">                $(".progess").animate({width:"100%"},50).fadeOut();            </script>    </div></div></body></html>

这里利用浏览器逐行解析DOM的方式，在每一个节点下面加入进度条代码，等到当前节点加载完毕之后，进度条代码执行，页面显示进度情况，当页面加载完毕，进度变为100%，然后淡出。
参考资料：CSDN博客各位大拿的博客

阅读全文

0 0