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 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
尝试在让script的type属性等于text/html
2013/01/15 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
使用python绘制3维正态分布图的方法
2018/12/29 Python
浅谈django channels 路由误导
2020/05/28 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
合作协议书模板
2014/10/10 职场文书
团代会闭幕词
2015/01/28 职场文书
社团个人总结范文
2015/03/05 职场文书
工作年限证明范本
2015/06/15 职场文书
运动会通讯稿100字
2015/07/20 职场文书
高中团支书竞选稿
2015/11/21 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers