此插件是基于jqueryUI的widget,下面是具体实现代码

第一部分css:

/***loading***/
.loading-box{ position:absolute; text-align:center;}
.loading-box .loading-message{ height:30px; line-height:30px; color:#999999;}
.sideslip{background-color:#f9f9f9; font-size:12px; color:#666666;position:relative;}
.scroll-box{ margin:1px auto 0px auto; }

第二部分jquery:

(function($,undefined){
$.widget('ui.loading', {
options: {
loadingStyle: { backgroundColor: '#F3F3F3' },
message: '任务加载中'
},
_create: function () {
this.html = '<div class="loading"><div class="loading-box"><div class="loading-img"><img src="/Images/282.GIF" width="32" height="32" alt=""/></div><div class="loading-message"></div></div></div>'; },
show: function () {
var wrapW = this.element.innerWidth(),
wrapH = this.element.innerHeight();
this.loadingHtml = $(this.html).appendTo(this.element).css(this.options.loadingStyle).css({ width: wrapW, height: wrapH, position: 'absolute', top: 0, left: 0 });
this.loadingHtml.find('.loading-box').position({ my: 'center center', at: 'center center-10%', of: this.loadingHtml });
this.loadingHtml.find('.loading-message').text(this.options.message); },
hide: function () {
if (this.loadingHtml != undefined) {
this.loadingHtml.remove();
}
}
});
})(jQuery)

第三部分调用:

  这里需要说明下,首先需要初始化loading,如下面例子:

//初始化loading
$('.sideslip').loading();

  最后通过window.setTimeOut()来设置延时时间,下面的例子是延迟两秒后隐藏loading

$('.sideslip').loading('show');
window.setTimeout(function () {
$('.sideslip').loading('hide');
}, 2000);

纯js+css实现loading等待效果的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 手机站全局的html+css加载等待效果

    本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒... 基本思路:由于Html的解析是从上到下 ...

  4. js+css实现模态层效果

    在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果 以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及c ...

  5. 纯JS.CSS编写的可拖拽并左右分栏的插件(复制代码就能用)

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...

  6. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  7. 纯JS写动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  8. loading等待效果

    效果预览:这两个球一直在转,不能进行其他操作 div放在最外层 <div id="loadingImg" style="height: 100%;width: 10 ...

  9. AJAX 的 Ajax返回数据之前的loading等待效果(gif效果等)

    首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sc ...

随机推荐

  1. jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

    我用到的原材料地址:http://www.cnblogs.com/leejersey/p/3660202.html 修改后: /// <reference path="../../Js ...

  2. 0030 Java学习笔记-面向对象-垃圾回收、(强、软、弱、虚)引用

    垃圾回收特点 垃圾:程序运行过程中,会为对象.数组等分配内存,运行过程中或结束后,这些对象可能就没用了,没有变量再指向它们,这时候,它们就成了垃圾,等着垃圾回收程序的回收再利用 Java的垃圾回收机制 ...

  3. XmlSerializer的使用

    关键词: XmlSerializer StreamWriter T instance 保存xml文件 代码: public static void SaveXML<T>(string xm ...

  4. 大数据系列(1)——Hadoop集群坏境搭建配置

    前言 关于时下最热的技术潮流,无疑大数据是首当其中最热的一个技术点,关于大数据的概念和方法论铺天盖地的到处宣扬,但其实很多公司或者技术人员也不能详细的讲解其真正的含义或者就没找到能被落地实施的可行性方 ...

  5. 图概PHP生命周期

    一图胜千言~ 这是之前根据网上大牛们的分析和跟着阅读了一点源码而做出来的总结.因为那时候困于对整个过程没有一个全面的认识,所以想自己做个图吧,那样看起来要更加直接了当,说不定还能会有一个更好的认识和更 ...

  6. java实现文件变化监控

    一. spring配置文件:application.xml <?xml version="1.0" encoding="UTF-8"?> <b ...

  7. 使用 python 实现 memcached 的启动服务脚本 rc

    #!/usr/bin/python #coding:utf-8 import sys import os from subprocess import Popen, PIPE class Memcac ...

  8. 利用nagios搭建打印机监控服务器

    实验背景:公司有很多台HP惠普打印机,管理起来比较麻烦.于是想着能否做个打印机监控服务器,能够快速响应打印机所出现的所有问题.之后上网查了相关资料搭建了一台,使用也没任何问题,于是便拿出来跟大家分享. ...

  9. SpringMVC 返回json

    1.导入jackson的jar包 2.在方法体上加上@ResponseBody /** * 得到ProType的typeId,typeName列表 * 返回json * */ @RequestMapp ...

  10. void main() && int main()

    C/C++ 中从来没有定义过void main( ) .C++ 之父说过: The definition void main( ) { /* ... * / } is not and never ha ...