通知
  • 关于网站更多信息请加QQ群(1061691290)
  • jpress升级到4.x，显示有些问题，修复中
  • 网站还会持续更新
文章来源于网络，无法注明出处的还请谅解，如果出处注明错误（如仍是载转），请联系我修改

JavaScript页面加载进度条（转载）

1152人浏览 / 0人评论 / 页 | 这是对我有帮助的文章  | 分类： 计算机语言  | 标签： 转载  | 

作者：navigatorOpera

链接：https://blog.csdn.net/navigatorOpera/article/details/73929328

来源：CSDN

目前没有任何浏览器可以直接获取正在加载对象的大小，因此我们只能采取迂回战术，利用浏览器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) 打赏

相关文章

J2EE十三个规范（转）
J2EE十三个规范（转）
Java开发必须掌握的 21 个 Java 核心技术！（转）
Java开发必须掌握的 21 个 Java 核心技术！（转）
Java开发人员必知必会的20种常用类库和API（转）
Java开发人员必知必会的20种常用类库和API（转）

作者其它文章

leetcode 剑指 Offer 62. 圆圈中最后剩下的数字
leetcode 剑指 Offer 62. 圆圈中最后剩下的数字
leetcode 剑指 Offer 57. 和为s的两个数字
leetcode 剑指 Offer 57. 和为s的两个数字
leetcode 剑指 Offer 41. 数据流中的中位数
leetcode 剑指 Offer 41. 数据流中的中位数

全部评论

还没有评论！