xajax loading(正在读取数据，数据正在加载中)的例子,附本站loading写法，更多loading动画图片样式可以到http://www.ajaxload.info定做.
注：xajax 0.2.1 Release以上版本支持自定义loading
见过很多使用AJAX技术的网站在读取数据的时候都会出现一个进度条写着读取中吧？感觉很COOL是吧，XAJAX照样也能做！
本站loading的写法
<script type="text/javascript">
<!--
xajax.loadingFunction = function(){
xajax.$('loadingMessage').style.display='block';
};
xajax.doneLoadingFunction = function(){
xajax.$('loadingMessage').style.display = 'none';
}
// -->
</script>
body内容
<div id="loadingMessage" style="width:560px;margin:0 auto;text-align:left;float:left; display: none;clear:both;">
<img src="<>/templates/<>/images/xajax-loading.gif" alt="" title="" /> loading...
</div>
其实loading很简单，在要出现进度条的页面上首先放上如下代码：
<!--loding-->
<div id="loadingContainer">
<div id="loading"><img src="src/images/common/loader.gif" mce_src="src/images/common/loader.gif" />页面载入中，请稍候</div>
</div>
<!--loding end-->
这样就做出了来了一个显示等待条的方块。
接着在页面里面写上如下JS代码：
<script languege="javascript/text">
loadingpic = document.getElementById('loadingContainer');
loadingpic.style.display = 'none';// 初始化进度条为不可见
/*****这两句话比较重要*****/
xajax.loadingFunction = loading; // 定义XAJAX在等待请求时候调用的函数
xajax.doneLoadingFunction = loadingDone; //定义XAJAX在或得请求数据以后调用的函数
function loading(){
loadingpic.style.display = 'block'; //设置请求数据的时候可见
}
function loadingDone() {
loadingpic.style.display = 'none'; //设置请求结束以后消失
}
</script>
就这么简单的几句，状态条功能就实现了。
如果你要找一些加载等待的loading的动态图片的话
可以到这个网站上去看一下，可以自定义生成
http://www.ajaxload.info
上一篇：xajax获取表单值获取输入框值 下一篇：从0.2升级到0.5的改变
发表评论
好多网友都好踊跃，这是好的，但请不要发表无意义的评论，谢谢
分类导航
相关链接
我常去的地方
友情链接
订阅xajax更新
最新文章 
- 本站将停止更新
- 发现一个xajax在IE7下令人沮丧的问题
- xajax乱码一例
- 本站前台程序提供下载
- xajax不适合做什么
- xajax中文手册PDF版
- xajax的优点缺点
- 关于动态加载的A在lightbox无效果的解决办法
- ajax拖动层，保存层位置
- 通过xajax给fckeditor增加自动保存草稿功能
最新评论
热门文章
- xajax中文手册PDF版(3805)
- xajax无刷新上传实例(3443)
- ajax拖动层，保存层位置(3040)
- xajax源程序下载(2837)
- xajax不适合做什么(2739)
- 给我留言(2691)
- xajax loading(正在读取数据)(2510)
- xajax如何处理表单(2222)
- xajax 0.5版本方法集[转](2047)
- 通过xajax给fckeditor增加自动保存草稿功能(2018)
loading...
然后自己定义函数showLoading和hideLoading
<script type="text/javascript">
<!--
xajax.callback.global.onResponseDelay = showLoading;
xajax.callback.global.onComplete = hideLoading;
// -->
</script>
你可以参考这篇文章
http://blog.chinaunix.net/u/10599/showart_330999.html
xajax.doneLoadingFunction = function(){}
老大，现在xajax的版本没有这两个事件了呀，我自己写函数么？有没有现成的事件可以用？
#clarityDiv{left:0; top:0; right:0; bottom:0; margin:0; padding:0;width:100%;height:100%;background:#000;position:fixed;right:16px;z-index:99;-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80); _position:absolute;}
#clarityDiv #ie6{width:100%;height:100%;_background:#f00;position:fixed;}
再将loading层放置在这个层里面，载入是显示层，完成後隐藏层
http://www.dayanmei.com/demo/popup/
将这个loadding的内容放在一个层上面，这个层可以是半透明的，但是覆盖当前页面的内容，这样鼠标就不能点击了