自己写的一个小插件,还有很多需要完善。。。

(function ($) {
    $.fn.StartLoading = function (option) {
        var defaultVal = {
            loadgif: 'image/loading.gif',
            backcolor: 'white',
            picheight: 50,
            picwidth: 50,
            fullshowpic: false,//图片是否设置透明度
            opacity: 0.5,
            timeout: 3000
        }
        var result = $.extend({}, defaultVal, option);
        var $obj = $(this);//选择器的Jquery对象
        var iswndordoc = false;
        if ($(this).get(0) == document || $(this).get(0) == window || $(this).get(0) == document.body) {
            iswndordoc = true;
            $obj = $(document.body);
        }
        //获取对象属性
        var constClone = {
            constwidth: $obj.width(),
            constheight: $obj.height(),
            constleft: iswndordoc == true ? 0 : $obj.offset().left,
            consttop: iswndordoc == true ? 0 : $obj.offset().top
        }
        if (iswndordoc) {
            var $clonebottom = $("<div></div>");
        } else {
            if ($(this)[0].tagName != "div") {
                var $objTemp = $("<div id=\"_temp_div\" style=\"width:" + constClone.constwidth + "; height:" + constClone.constheight + "; left:" + constClone.constleft + "; top:" + constClone.consttop + "\"></div>");
                $($obj.parent().get(0)).append($objTemp);
                $obj = $objTemp;
            }
            //生成最底层DIV
            var $clonebottom = $obj.clone().removeAttr("id").removeAttr("class").removeAttr("name");
        }

//设置最底层DIV属性
        $clonebottom.removeClass().removeAttr("style").empty().css({
            "position": "absolute",
            "left": constClone.constleft,
            "top": constClone.consttop,
            "z_index": "10000",
            "width": constClone.constwidth,
            "height": constClone.constheight,
            "background-color": "transparent"
        });
        var $cloneTop = $clonebottom.clone().css({ "z_index": "9999", "background-color": "" + result.backcolor + "", "position": "" });
        $clonebottom.append($cloneTop);
        $clonebottom.append("<img id=\"_loading_plugin\" src=\"" + result.loadgif + "\" style=\"position:absolute;z_index: 9999\"/>");
        if (iswndordoc) {
            $obj.append($clonebottom);
        } else {
            $($obj.parent().get(0)).append($clonebottom);
        }
        var $imgloading = $("#_loading_plugin");
        $imgloading.css({ "width": "" + result.picwidth + "px", "height": "" + result.picheight + "px" });
        $imgloading.css({ "left": (constClone.constwidth - $imgloading.width()) / 2, "top": (constClone.constheight - $imgloading.height()) / 2 });
        if (result.fullshowpic)
            $clonebottom.css("opacity", "" + result.opacity + "");
        else
            $cloneTop.css("opacity", "" + result.opacity + "");
        var hand = setTimeout(function () {
            $clonebottom.fadeOut("slow", function () {
                $(this).remove();
                clearTimeout(hand);
            });
        }, result.timeout)
        return $clonebottom;
    }

$.fn.StopLoading = function () {
        var $globalthis = $(this);
        $globalthis.remove()
    }
})(jQuery)

用法: 开始显示  var $load = $(window).StartLoading({ timeout: 1000000, fullshowpic: true }); 结束显示:  $load.StopLoading();

加载等待loading的更多相关文章

  1. [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. vue-element-admin 全局loading加载等待

    最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 当拿到这个需求的时候我是拒绝的,因为我以及局部写好了0.0,这是要大改呀....,没办法老板的要求,只能硬着头皮 ...

  3. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  4. IOS开发UI篇之──自定义加载等待框(MBProgressHUD)

    本文转载至 http://blog.csdn.net/xunyn/article/details/8064984   原文地址http://www.189works.com/article-89289 ...

  5. WPF加载等待动画

    原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 <UserC ...

  6. fakeLoader页面加载前loading演示8种效果

    提高用户体验的插件fakeLoader页面加载前loading演示8种效果 在线预览 下载地址 示例代码 <div id="main"> <div class=& ...

  7. C#窗体的加载等待(BackgroundWorker控件)实现

    窗体拉一个Button按钮和一个加载等待显示的label, label默认隐藏,点击按钮时显示这个label,加载完再隐藏 1.工具箱拉BackgroundWorker控件到窗体 2.backgrou ...

  8. cocos2d-x游戏开发(十五)游戏加载动画loading界面

    个人原创,欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11478885 这个资源加载的loading界面demo是在玩客网做逆转三国的时候随 ...

  9. ajax加载菊花loading效果

    Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...

随机推荐

  1. C 语言运算符优先级(记忆口诀)

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数名(形參表)   . 成员选择(对象) 对象.成员名   -& ...

  2. GitBlit中出现 error: remote unpack failed: error Missing tree

    clu@WASYGSHA01-1020 MINGW64 /d/ChuckLu/Git/Edenred/LISA_5.0.0.0 (local)$ git push origin preaction:p ...

  3. ThinkPHP5.0框架开发--第11章 TP5.0 杂项

    ThinkPHP5.0框架开发--第11章 TP5.0 杂项 第11章 TP5.0 杂项 =============================================== 今日学习 1. ...

  4. MFC补码原码反码转换工具

    /*_TCHAR str[100] = { 0 }; wsprintf(str, _T("%d"),num);*/ ; CString str; m_edit1.GetWindow ...

  5. xBIM 基础03 基本模型操作

    系列目录    [已更新最新开发文章,点击查看详细]  本篇将使用基本的代码示例来表示如何使用xBIM.我们将介绍持久存储的四个基本功能,即 CRUD(创建,检索,更新和删除).以下示例通常适用于IF ...

  6. MyEclipse 启动之 java.lang.RuntimeException: No application id has been

    found. 今天公司刚买来一台服务器,配置安装 java 开发环境的时候,MyEclipse 无法启动,查看日志文件之后,具体错误信息 如下: [java] view plaincopyprint? ...

  7. iOS系统的特点-iOS为什么运行更流畅

    1.进程管理机制-不允许后台进程: 2.用户事件响应优先级: 3.GPU加速: 4.系统内存管理机制: 5.运行机制-机器码直接运行-非虚拟机.

  8. 《Unix环境高级编程》读书笔记 第13章-守护进程

    1. 引言 守护进程是生存期长的一种进程.它们常常在系统引导装入时启动,仅在系统关闭时才终止.它们没有控制终端,在后台运行. 本章说明守护进程结构.如何编写守护进程程序.守护进程如何报告出错情况. 2 ...

  9. GDOI2018爆炸记

    Day0 12:45p.m. 从初中部出发前回班探望了一下同学,受到热烈欢迎(?) 13:15p.m. 出发去中山,路上本来想用mac看fz的,结果ass字幕导入失败,心态爆炸*1:后来成功获取xfz ...

  10. Mysql学习总结(29)——MySQL中CHAR和VARCHAR

    MySQL数据库的字符(串)类不要以为字符类型就是CHAR,CHAR和VARCHAR的区别在于CHAR是固定长度,只要你定义一个字段是CHAR(10),那么不论你存储的数据是否达到了10个字节,它都要 ...