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 相关文章推荐
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
Vue双向数据绑定(MVVM)的原理
Oct 03 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 自定义错误处理函数的使用详解
2013/05/10 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
用jquery来定位
2007/02/20 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
node.js基础知识小结
2018/02/26 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python开发简易版在线音乐播放器
2017/03/03 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
python爬虫实现中英翻译词典
2019/06/25 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
python操作cfg配置文件方式
2019/12/22 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
《海伦?凯勒》教学反思
2014/04/17 职场文书
网络优化专员求职信
2014/05/04 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis