加载效果(遮罩)

前几天,有群友在问bootstrap的加载效果用什么组件。其实百度搜索一下,也能找到很多的结果。在此,博主根据自己的使用经历分享下几个加载的小组件,希望大家用得着。主要分为实用型和炫酷型两种。实用型效果一般,但能适用各种浏览器;炫酷型使用最新的css3和html5写出来的,效果很炫,但基本上低版本的IE(10以下)都不能兼容。

回到顶部

一、实用型

1、PerfectLoading组件

这个组件是博主在网上找到的一个js,但下载下来之后发现一些大大小小的问题,于是,博主改写了下,命名为bootstrap-loading组件。它的原理就是在组件启动的时候弹出一个覆盖层,然后组件关闭时,将覆盖层的dom移除,加载效果使用了一张gif的图片。

PerfectLoad.js文件内容:

/*******************************************
 *
 * Plug-in:友好的页面加载效果
 * Author:sqinyang ([email protected])
 * Time:2015/04/20
 * Explanation:随着HTML5的流行,页面效果越来越炫,同时也需要加载大量的插件及素材,万恶的网速,特别对于挂在国外服务器的网站,一打开一堆素材缓缓加载,位置错乱不齐,故编写此方法,方便大家使用
 *
*********************************************/

jQuery.bootstrapLoading = {
    start: function (options) {
        var defaults = {
            opacity: 1,
            //loading页面透明度
            backgroundColor: "#fff",
            //loading页面背景色
            borderColor: "#bbb",
            //提示边框颜色
            borderWidth: 1,
            //提示边框宽度
            borderStyle: "solid",
            //提示边框样式
            loadingTips: "Loading, please wait...",
            //提示文本
            TipsColor: "#666",
            //提示颜色
            delayTime: 1000,
            //页面加载完成后,加载页面渐出速度
            zindex: 999,
            //loading页面层次
            sleep: 0
            //设置挂起,等于0时则无需挂起

        }
        var options = $.extend(defaults, options);

        //获取页面宽高
        var _PageHeight = document.documentElement.clientHeight,
        _PageWidth = document.documentElement.clientWidth;

        //在页面未加载完毕之前显示的loading Html自定义内容
        var _LoadingHtml = ‘<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:‘ + _PageHeight + ‘px;background:‘ + options.backgroundColor + ‘;opacity:‘ + options.opacity + ‘;filter:alpha(opacity=‘ + options.opacity * 100 + ‘);z-index:‘ + options.zindex + ‘;"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;border-color:‘ + options.borderColor + ‘;border-style:‘ + options.borderStyle + ‘;border-width:‘ + options.borderWidth + ‘px; height:80px; line-height:80px; padding-left:80px; padding-right: 5px;border-radius:10px;  background: ‘ + options.backgroundColor + ‘ url(/Content/bootstrap-loading/images/loading.gif) no-repeat 5px center; color:‘ + options.TipsColor + ‘;font-size:20px;">‘ + options.loadingTips + ‘</div></div>‘;

        //呈现loading效果
        $("body").append(_LoadingHtml);

        //获取loading提示框宽高
        var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
        _LoadingTipsW = document.getElementById("loadingTips").clientWidth;

        //计算距离,让loading提示框保持在屏幕上下左右居中
        var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
        _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;

        $("#loadingTips").css({
            "left": _LoadingLeft + "px",
            "top": _LoadingTop + "px"
        });

        //监听页面加载状态
        document.onreadystatechange = PageLoaded;

        //当页面加载完成后执行
        function PageLoaded() {
            if (document.readyState == "complete") {
                var loadingMask = $(‘#loadingPage‘);

                setTimeout(function () {
                    loadingMask.animate({
                        "opacity": 0
                    },
                    options.delayTime,
                    function () {
                        $(this).hide();

                    });

                },
                options.sleep);

            }
        }
    },
    end: function () {
        $("#loadingPage").remove();
    }
}

这个js基本上是网上down下来的,只是在此基础上博主加了一个end的方法。

来看看组件如何使用,下面是测试代码:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>loading</title>

    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <script src="~/Content/jquery-1.9.1.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.js"></script>
    <script src="~/Content/bootstrap-loading/PerfectLoad.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn_submit").on("click", function () {
                $.bootstrapLoading.start({ loadingTips: "正在处理数据,请稍候..." });
                $.ajax({
                    type: ‘get‘,
                    url: ‘/Home/TestLoading‘,
                    data: {},
                    success: function (data, statu) {
                        debugger;
                    },
                    complete: function () {
                        $.bootstrapLoading.end();
                    }
                });
            })

        });
    </script>
</head>
<body>
    <div class="panel-body" style="padding:0px">
        <div class="panel panel-default" style="height:450px;">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-xs-4">
                            <button type="button" id="btn_submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>加载测试</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

使用说明:组件不需要任何的html代码,只需要在执行loading的时候调用组件的start方法即可。 start()方法启动弹出层,并可设置defaults 变量里面的所有参数。当loading结束后再调用组件的end方法,自动将弹出层移除。来看看效果:

如果对效果不满意,可自己设置defaults里面的参数,注释写得很详细,在此就不一一列举了。

原文地址:https://www.cnblogs.com/sjqq/p/9606625.html

时间: 2024-10-09 16:48:08

加载效果(遮罩)的相关文章

页面加载时遮罩效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>页面加载时遮罩效果</title>        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>      

数据正在加载 关于 遮罩层的添加

在做项目过程中,发现 如果数据正在加载,点击页面进行别的操作 可能出错(例如 tab 页切换时,操作太快,数据填入了错的tab页 ,当然这种情况是指数据不随tab页的点击而加载) 解决:1.想到点击一个tab页禁止 其它tab的可点击性 如为button (表单类 disabled=true) 在登录页面中 常用此效果来处理 防止用户填完数据后 多次点击登录 进行数据库访问 (用户提交一次后 将登录按钮设为不可点 请求返回后在放开) 如为a 标签  需要三步  1. 在onclick事件 ret

Jquery页面加载效果

1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false).本文地址:http://www.cnblogs.com/lengzhan/p/6423312.html 2.代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

Android 下拉刷新上拉加载效果功能,使用开源项目android-pulltorefresh实现

应用场景: 在App开发中,对于信息的获取与演示,不可能全部将其获取与演示,为了在用户使用中,给予用户以友好.方便的用户体验,以滑动.下拉的效果动态加载数据的要求就会出现.为此,该效果功能就需要应用到所需要的展示页面中. 知识点介绍: 本文主要根据开源项目android-pulltorefresh展开介绍. android-pulltorefresh [一个强大的拉动刷新开源项目,支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.G

时尚设计!三种奇特的网格加载效果【附源码下载】

如果你看过三星企业设计中心网站,你肯定已经注意到了时尚的网格加载效果.每一项加载的时候,背景色会首先滑出,然后图像显现出来.滑动颜色表示图像,也就是说它是彩色图像的主色. 在这篇文章中,我们想向您展示了如何使用 Masonry 网格砌体插件,结合 CSS 动画重现这种效果.另外在这里,我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用. 立即下载      在线演示 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safar

超酷的CSS3网页加载效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Android 下拉刷新上拉加载效果功能

应用场景: 在App开发中,对于信息的获取与演示,不可能全部将其获取与演示,为了在用户使用中,给予用户以友好.方便的用户体验,以滑动.下拉的效果动态加载数据的要求就会出现.为此,该效果功能就需要应用到所需要的展示页面中. 知识点介绍: 本文主要根据开源项目android-pulltorefresh展开介绍. android-pulltorefresh [一个强大的拉动刷新开源项目,支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.G

[js开源组件开发]loading加载效果

loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果如下图: 这里演示了三种不一样的效果. 1.loading效果显示在按钮自己身上,这是极好的 2.loading效果显示在其他dom上, 3.loading全屏显示,不明觉厉. 实例demo演示请点击这里http://www.lovewebgames.com/jsmodule/loading.htm

简单实现懒加载效果

懒加载原理就是先利用自定义属性存放图片资源,然后监听浏览器窗口,滑动的时候才设置图片资源(发送请求),从而实现懒加载效果. 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>懒加载</title> </head> <style type="text/css"> div:not(#wrap