JS 非图片动态loading效果实现代码
代码如下：
首先实现该功能的js对象LoadingMsg：
代码如下:
var Class = {
create: function() {
return function() { this.init.apply(this,arguments); }
}
}
var LoadingMsg = Class.create();
LoadingMsg.prototype = {
init: function(spanId, spanMsg) {
this.intervalID = -10000;
this.spanId = spanId;
this.spanMsg = spanMsg;
this.timespan = 1000;
this.pointNum = 3;
this.initPointMsg = "...";
},
Loading: function() {
var maxLength = this.spanMsg.length + this.pointNum;
var currentSpanMsg = document.getElementById(this.spanId).innerHTML;
if (currentSpanMsg.length < maxLength) {
document.getElementById(this.spanId).innerHTML += ".";
}
else {
document.getElementById(this.spanId).innerHTML = this.spanMsg;
}
},
Start: function() {
document.getElementById(this.spanId).innerHTML = this.spanMsg + this.initPointMsg;
var callObj = this;
this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan);
},
End: function() {
document.getElementById(this.spanId).innerHTML = "";
clearInterval(this.intervalID);
}
}
var callObj = this;
this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan);
this.intervalID = setInterval(this.Loading, this.timespan);
在执行Loading方法时则会报找不到this.spanMsg的错误。
因为在setInterval里的第一个参数里的this是windows对象，而不是LoadingMsg对象。windows.setInterval嘛。
应用该方法：
代码如下:
<body>
<input type="button" value="Start" onclick="javascript:StartLoading();" />
<span id="spanId" style="color:Red"></span>
<br />
<input type="button" value="End" onclick="javascript:EndLoading();" />
<br /><br />
<script type="text/javascript">
var loadingMsgObj = new LoadingMsg("spanId","loading");
function StartLoading() {
loadingMsgObj.Start();
}
function EndLoading() {
loadingMsgObj.End();
}
</script>
</body>
来源于prototype.js里经典创建Js对象的
代码如下:
var Class = {
create: function() {
return function() { this.init.apply(this,arguments); }
}
}
var LoadingMsg = Class.create();
在Class.create()的时候做了2件事，1个是创建了LoadingMsg的对象，即var LoadingMsg = function() {}；
另外一件事就是调用LoadingMsg的init方法，初始化LoadingMsg里的静态私有变量，相当于c#里的构造函数作用。
如果你觉得这很装逼的话，如果你更喜欢简单朴实的女孩子的话，也可以改写LoadingMsg对象：
代码如下:
var LoadingMsg = function() { };
LoadingMsg.prototype = {
init: function(spanId, spanMsg) {
this.intervalID = -10000;
this.spanId = spanId;
this.spanMsg = spanMsg;
this.timespan = 1000;
this.pointNum = 3;
this.initPointMsg = "...";
},
Loading: function() {
var maxLength = this.spanMsg.length + this.pointNum;
var currentSpanMsg = document.getElementById(this.spanId).innerHTML;
if (currentSpanMsg.length < maxLength) {
document.getElementById(this.spanId).innerHTML += ".";
}
else {
document.getElementById(this.spanId).innerHTML = this.spanMsg;
}
},
Start: function(spanId, spanMsg) {
this.init(spanId, spanMsg);
document.getElementById(this.spanId).innerHTML = this.spanMsg + this.initPointMsg;
var callObj = this;
this.intervalID = setInterval(function() { callObj.Loading(); }, this.timespan);
},
End: function() {
document.getElementById(this.spanId).innerHTML = "";
clearInterval(this.intervalID);
}
}
所不同的是把init的过程调到Start时执行，因此调用的时候也就变成了
代码如下:
var loadingMsgObj = new LoadingMsg();
function StartLoading() {
loadingMsgObj.Start("spanId", "loading");
}
从面向对象的习惯上来说，我个人还是倾向第一种写法，在实例化对象的时候即传入参数，而不是执行对象方法的时候传入参数。
另外关于setInterval方法传参数时，如果参数是简单的string，可以
setInterval("DisplayXYZ('xyz')",1000);
如果参数是对象，
则可以setInterval(function(){DisplayXYZ(obj);},1000);
LoadingMsg还是主要用在Ajax中，应用于执行时间可能较长的场景，在发送请求后loadingMsgObj.Start()，在成功获取响应时loadingMsgObj.End()。
相关推荐
-
javascript实现一个网页加载进度loading
loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈","省略号"等等. 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了. 但是页面的加载进
-
Angularjs注入拦截器实现Loading效果
angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果烦回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类. 什么是拦截器? $httpProvider 中有一个 interceptors 数组,而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂.下面的例子告诉你怎么创建一个拦截器: <!-- lang: js --> module.factory('myInterceptor', ['$log', function($log) {
-
很酷的javascript loading效果代码
复制代码 代码如下: <font color=red><script language="JavaScript"> <!-- var url = 'http://www.jb51.net'; ///这里是你的网址 //--> </script> </head> <body onLoad="location.href = url"> <div style='margin-to
-
原生JS实现LOADING效果
纯文本loading效果,可以自己定义颜色和速度 复制代码 代码如下: /** Loading animation * Created by 黑と白の印記 on 15/03/11. */ function loading(element,lightColor,darkColor,speed,callback){ if(!element&&(!element.innerText||!element.textContent))return element = type
-
Listloading.js移动端上拉下拉刷新组件
listloading是一个移动端的上拉.下拉加载更多的组件.主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在.如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦.listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll
-
JS Loading功能的简单实现
我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示.其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下. 1.当前页面: 复制代码 代码如下: <div class="current"><a href="#" onclick="showLoading()">Loading</a></div> 2.遮罩层: 复
-
JavaScript实现网页加载进度条代码超简单
网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行
-
javascript制作loading动画效果 loading效果
复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left
-
jquery插件NProgress.js制作网页加载进度条
NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Google, YouTube, 和 Medium 提供灵感. 安装 依赖于 jQuery (1.8版本及以上),添加 np
-
js loading加载效果实现代码
复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) { ShowLoading(); System.Threading.Thread.Sleep(10000); ClientScript.RegisterClientScriptBlock(typeof(string), "", "<script>document.body.onload=function(){removeLoadMsg()