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 相关文章推荐
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
数组Array的排序sort方法
Feb 17 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
新52大事件
2020/03/03 欧美动漫
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
javascript Keycode对照表
2009/10/24 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python 解决Windows平台上路径有空格的问题
2020/11/10 Python
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
婚礼答谢礼品
2015/01/20 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
警示教育观后感
2015/06/17 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
2022年四月新番
2022/03/15 日漫
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL