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 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
vue 实现特定条件下绑定事件
Nov 09 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
js读取本地文件的实例
2017/12/22 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
Python字符串逐字符或逐词反转方法
2015/05/21 Python
Python中的TCP socket写法示例
2018/05/11 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python 实现数组相减示例
2019/12/27 Python
python如何查看网页代码
2020/06/07 Python
服务之星获奖感言
2014/01/21 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
终止合同协议书
2014/04/17 职场文书
运动会宣传口号
2014/06/09 职场文书
物业保安岗位职责
2014/07/02 职场文书
会员活动策划方案
2014/08/19 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书