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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
vue模块移动组件的实现示例
May 20 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
分享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编写PDF文档生成器
2006/10/09 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php工具型代码之印章抠图
2018/07/18 PHP
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python pillow模块使用方法详解
2019/08/30 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
见习期自我鉴定
2013/11/07 职场文书
会计岗位描述
2014/02/22 职场文书
父母寄语大全
2014/04/12 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
超市创业计划书
2014/09/15 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
教师党员个人整改措施
2014/10/27 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书