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 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
javascript实现固定侧边栏
Feb 09 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/08/06 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python检测服务器是否正常
2014/02/16 Python
python的变量与赋值详细分析
2017/11/08 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python实现朴素贝叶斯算法
2018/11/19 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
服务中心夜班服务员岗位职责
2013/11/27 职场文书
顶撞老师检讨书
2014/02/07 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书