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 Lightbox 图片展示插件使用说明
Apr 25 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 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
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
实例解析php的数据类型
2018/10/24 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python实现代码统计工具
2019/09/19 Python
深入了解python列表(LIST)
2020/06/08 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
校车安全责任书
2014/08/25 职场文书
工作收入证明范本
2015/06/12 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
python中print格式化输出的问题
2021/04/16 Python
详解Python牛顿插值法
2021/05/11 Python
Mysql中常用的join连接方式
2022/05/11 MySQL