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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
express.js中间件说明详解
Mar 19 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 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缓存技术的使用说明
2011/08/06 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php提取微信账单的有效信息
2018/10/01 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python计算一个文件里字数的方法
2015/06/15 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
在Python中定义一个常量的方法
2018/11/10 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
大三自我鉴定范文
2013/10/05 职场文书
农民工创业典型事迹
2014/01/25 职场文书
婚礼主持词开场白
2014/03/13 职场文书
公司合作意向书范文
2014/07/30 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript