预期效果：

1、点击Save按钮，创建及显示loading div框

2、Save操作完成后，再删除loading 及弹出提示结果

<html>

<head>

</head>

<body>

    <input type="button" value="Save" name="btnSave" />

</body>

</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

function loadingShow(){

    var loadingContainer = $("div.loading");

    if (loadingContainer.length <= 0) {

        loadingContainer = $("<div>", { Class: "loadingWhenSave" , id:"loadingWhenSave" });

        var img = $("<img>", { src: "loading.gif" });

        loadingContainer.html("");

        loadingContainer.append(img).css({

            position: "absolute", //"absolute",

            zIndex: "9999",

            textAlign: "center",

            backgroundColor: "#000",

            border: "solid 4px red",

            paddingTop: "18px",

            fontSize: "14px",

            top: "30%",

            left: "40%",

            height: "300px",

            width: "400px"

        });

        //document.body.appendChild(loadingContainer);

        loadingContainer.appendTo('body');

    }

    //$(loadingContainer).show();

}

function loadingHide(){

    $("#loadingWhenSave").remove();

}

function saveFinished(){

    //loadingHide();

    alert("save success.");

}

$(document).ready(function(){

    $(btnSave).click(function(){

        loadingShow();

        setTimeout("saveFinished()",2000);

    });

});

</script>

js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div的更多相关文章

  1. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  2. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  3. 页面加载完之前显示Loading

    1.第一种方式 HTML <body class="is-loading"> <div class="curtain"> <div ...

  4. Html 页面载入内容前，显示 loading 效果。

    Html 内容 loading部分: <div id="sys-loading" class=""><div class="spin ...

  5. [JS] 页面回车键提交表单-常用于登录页面

    //判断是否按下了回车键 var EnterSubmit = function(evt){ evt= window.event || evt; if (evt.keyCode == 13){ //若按 ...

  6. js　封装的自动创建表格的相关操作

    因为要做一个动态输入的表格,现在积累一下资料,在网上找了一些资料,经过总结是使用更加方便些,谁有更好的插件和封装的东西,请大家分享一下. <script type="text/java ...

  7. vue+springboot后台实现页面按钮权限

    思路 1.用户跟角色关联 2.角色跟菜单关联 3.菜单跟菜单下的按钮关联 4.后端返回每个菜单下的按钮,前端通过自定义事件,在每个按钮上加上相应的事件 打字麻烦,还是看图吧! 建立btn.js 然后在 ...

  8. 图片未完成加载显示loading

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  9. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

随机推荐

  1. jQuery 插件开发——GridData（表格）第二版

    开发背景 表格插件之前我也写个一篇,当时写那个插件的时候,我自己还没有总结出写插件的方法,虽然功能实现了,但是使用起来还是有点别扭的,并且需要在调用写添加特定名称的方法,这个地方着实违背了开发插件的易 ...

  2. Grideview总结

    http://www.cnblogs.com/sufei/archive/2010/03/27/1698590.html

  3. DropDownList 控件的SelectedIndexChanged事件触发不了

    先看看网友的问题: 根据Asp.NET的机制,在html markup有写DropDownList控件与动态加载的控件有点不一样.如果把DropDownList控件写在html markup,即.as ...

  4. 删除XML文档中某节点

    前几天Insus.NET在写了一系列XML文档进行操作.创建 <怎样创建XML文档> http://www.cnblogs.com/insus/p/3276944.html       & ...

  5. Glib学习笔记（一）

    你将学到什么 如何使用GObject实现一个新类 类头文件 声明一个类型的方法选择取决于类型是可被继承的还是不可被继承的. 不可被继承的类型(Final类型)使用G_DECLARE_FINAL_TYP ...

  6. Python中__call__的用法

    概念: Python中有一个有趣的语法,只要定义类型的时候,实现__call__函数,这个类型就成为可调用的.换句话说,我们可以把这个类型的对象当作函数来使用,相当于 重载了括号运算符.  示例: 所 ...

  7. fseek函数

    函数名:fseek函数 头文件:#include<stdio.h> 功能:把与fp有关的文件位置指针放到一个指定位置. 格式:  int fseek(FILE *stream, long ...

  8. DevExpress ASP.NET Dev控件客户端事件 ClientSideEvents

    原文地址:http://www.cnblogs.com/allenlf/p/4171189.html

  9. [翻译]CURAND Libaray--Host API--(2)

    Translated by xingoo 如果有错误请联系:xinghl90@gmail.com 2.3 返回值 所有的CURAND host端的函数返回值都是curandStatus_t.如果调用没 ...

  10. SpringBoot dubbo之class is not visible from class loader

    使用了两个类加载器加载了同一个类,区分一个Class对象是否相等要看包名+类名,也要看是否是同一个类加载器 方案一,排查掉spring-boot-devtools模块的maven引入可以解决,这时候所 ...