JS Loading功能的简单实现


Posted in Javascript onNovember 29, 2013

我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示。其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下。

1.当前页面:

<div class="current"><a href="#" onclick="showLoading()">Loading</a></div>

2.遮罩层:
<div id="over" class="over"></div>

3.Loading展示层:
<div id="layout" class="layout"><img src="//img.jbzj.com/file_images/article/201311/2013112931.gif" alt="" /></div>

整体代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .current a {
            font-size: 20px;
        }
        .over {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }
        .layout {
            display: none;
            position: absolute;
            top: 40%;
            left: 40%;
            width: 20%;
            height: 20%;
            z-index: 1001;
            text-align:center;
        }
    </style>
    <script type="text/javascript">
        function showLoading()
        {
            document.getElementById("over").style.display = "block";
            document.getElementById("layout").style.display = "block";
        }
    </script>
</head>
<body>
    <div class="current"><a href="#" onclick="showLoading()">Loading</a></div>
    <div id="over" class="over"></div>
    <div id="layout" class="layout"><img src="//img.jbzj.com/file_images/article/201311/2013112931.gif" alt="" /></div>
</body>
</html>

最终效果:
JS Loading功能的简单实现

在网上还看到另外一种实现方式,感觉思路不错,就是利用JS不断的改变html标签的value值,达到加载提示的效果,根据他的思路我自己实现了下,代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
    <style type="text/css">
        #tb {
            width: 100%;
            height: 100%;
            line-height: 10px;
        }
            #tb tr td {
                text-align: center;
            }
        .progressbar {
            font-family: Arial;
            font-weight: bolder;
            color: gray;
            background-color: white;
            padding: 0px;
            border-style: none;
        }
        .percent {
            font-family: Arial;
            color: gray;
            text-align: center;
            border-width: medium;
            border-style: none;
        }
    </style>
    <script type="text/javascript">
        var bar = 0;
        var step = "||";
        /*
        *第一种方式即 :$(document).ready(function(){.....});
        */
        //$(function () {
        //    progress();
        //});
        /*
        *第二种方式 
        */
        //window.onload = function () {
        //    progress();
        //}
        /*
        *第三种方式模拟 $(document).ready(function(){.....});
        */
        (function () {
            var ie = !!(window.attachEvent && !window.opera);
            var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
            var fn = [];
            var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
            var d = document;
            d.ready = function (f) {
                if (!ie && !wk && d.addEventListener)
                    return d.addEventListener('DOMContentLoaded', f, false);
                if (fn.push(f) > 1) return;
                if (ie)
                    (function () {
                        try { d.documentElement.doScroll('left'); run(); }
                        catch (err) { setTimeout(arguments.callee, 0); }
                    })();
                else if (wk)
                    var t = setInterval(function () {
                        if (/^(loaded|complete)$/.test(d.readyState))
                            clearInterval(t), run();
                    }, 0);
            };
        })();
        document.ready(function () {
            progress();
        });

        function progress() {
            bar = bar + 2;
            step = step + "||";
            document.getElementById("percent").value = bar + "%";
            document.getElementById("progressbar").value = step;
            if (bar <= 98) {
                setTimeout("progress()", 100);
            }
        }
    </script>
</head>
<body>
    <table id="tb">
        <tr>
            <td>
                <input type="text" size="50" class="percent" id="percent" /></td>
        </tr>
        <tr>
            <td>
                <input type="text" size="50" class="progressbar" id="progressbar" /></td>
        </tr>
    </table>
</body>
</html>

最终效果:

JS Loading功能的简单实现

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
js使用递归解析xml
Dec 12 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 #Javascript
浅析JavaScript中的类型和对象
Nov 29 #Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 #Javascript
转换字符串为json对象的方法详解
Nov 29 #Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 #Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 #Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 #Javascript
You might like
php调用mysql存储过程
2007/02/14 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
采购文员岗位职责
2013/11/20 职场文书
市场开发计划书
2014/05/07 职场文书
世界读书日的活动方案
2014/08/20 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2014年电厂工作总结
2014/12/04 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
安全教育的主题班会
2015/08/13 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL