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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JavaScript实现分页效果
Mar 28 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 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
一个程序下载的管理程序(三)
2006/10/09 PHP
php 启动报错如何解决
2014/01/17 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
jQuery参数列表集合
2011/04/06 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Django values()和value_list()的使用
2020/03/31 Python
python实现批量命名照片
2020/06/18 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
财务会计应届生求职信
2013/11/24 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
雷锋之歌观后感
2015/06/10 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang