JS实现的自定义显示加载等待图片插件(loading.gif)


Posted in Javascript onJune 17, 2016

本文实例讲述了JS实现的自定义显示加载等待图片插件。分享给大家供大家参考,具体如下:

在工作中遇到了一个问题 —— 某个业务流程分为几个阶段,每个阶段如果在数据没有显示出来之前就要显示加载图片loading.gif文件,如果有数据了就消失。为此,自己写了一个方法,方便整个工程使用。

<button onclick="show()">show</button>
<button onclick="hide()">hide</button>
<script>
//创建加载对象
var obj = new loadingImg();
//显示加载图片
function show(){
  obj.show();
}
//隐藏加载图片
function hide(){
  obj.hide();
}
//加载图片方法(对象)
function loadingImg(mySetting){
  var that = this;
  if(mySetting == "" || mySetting == undefined || typeof mySetting != "object"){
    mySetting = {};
  }
  //使用时间戳作为空间的ID
  var targetID = new Date().getTime();
  this.setting = {
    //插入图片的容器,使用jquery的查询方式传入参数
    targetConater : "",
    //使用图片的地址
    imgUrl : "../img/loading.gif",
    //图片显示的 宽度
    imgWidth : "32px",
    //图片的默认样式
    imgClass : "",
    //生成控件的ID
    "targetID" : targetID,
    //显示之前的回调函数
    beforeShow : function(plugin){
    },
    //显示之后的回调函数
    afterShow : function(plugin,targetID){
    }
  }
  this.setting = $.extend(this.setting, mySetting);
  //获取屏幕的宽度
  this.getScreenWidth = function(){
    return document.documentElement.clientWidth;
  }
  //获取屏幕的高度
  this.getScreenHeight = function (){
    return document.documentElement.clientHeight;
  }
  //显示控件
  this.show = function(){
    $("#" + that.setting.targetID).show();
  }
  //隐藏控件
  this.hide = function(){
    $("#" + that.setting.targetID).hide();
  }
  this.init = function(){
    //显示之前执行回调函数
    if(typeof that.setting.beforeShow == "function"){
      that.setting.beforeShow(that);
    }
    //存放字符串的变量
    var targetHTML = '';
    //将内容存放到指定的容器中,默认存放到body最底部
    if(that.setting.targetConater != "" && this.setting.targetConater != undefined){
      targetHTML = '<img src="' + that.setting.imgUrl + '" class="' + that.setting.imgClass + '" id="' + that.setting.targetID + '" style="display:none;">';
      $(that.setting.targetConater).html(targetHTML);
    }else{
      targetHTML = '<img src="' + that.setting.imgUrl + '" class="' + that.setting.imgClass + '">';
      targetHTML = '<div id="' + that.setting.targetID + '" style="display:none;position: absolute;top:50%;left: 50%;height: ' + that.getScreenHeight()+';width:'+that.getScreenWidth()+'">' + targetHTML + '</div>';
      $("body").append(targetHTML);
    }
    //判断用户是否自定义了图片的宽度
    if(that.setting.imgWidth != "" && that.setting.imgWidth.indexOf("px")>0 ){
      $("#"+targetID).css("width",that.setting.imgWidth);
    }
    //显示之后执行回调函数
    if(typeof that.setting.afterShow == "function"){
      that.setting.afterShow(that,targetID);
    }
  }
  this.init();
}
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
定义select的边框颜色
Apr 28 Javascript
js实现表格字段排序
Feb 19 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 #Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 #Javascript
Bootstrap前端开发案例二
Jun 17 #Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 #Javascript
Bootstrap前端开发案例一
Jun 17 #Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 #Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 #Javascript
You might like
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
javascript 实现map集合
2015/04/03 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python实现FTP文件传输的实例
2019/07/07 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
生产管理的三大手法
2013/11/11 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
个人授权委托书范本
2014/04/03 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
PHP RabbitMQ消息列队
2022/05/11 PHP