dwr 实现页面数据加载等待状态
2011-06-14 11:13
375 查看
问题:
用dwr技术查询海量数据时,用户点击按钮,提交请求后,页面长时间没反应.问题反映到我这.当然除了要提高性能外,也得给用户一个提示,比如出现"正在加载数据.."的提示.
解决办法:
如果要实现这种效果,就得在客户端用js判断加载情况,请求前是一种状态,请求后(后台处理,返回数据给前台)又是一种状态.
dwr工具包提供了两个函数,专门处理这两种情况:
(1) 请求前处理
DWREngine.setPreHook(jsfun)
在DWR调用之前设置执行一个函数(但是这个函数无参数),例如显示"正在加载数据.."信息
(2)请求后处理
DWREngine.setPostHook(jsfun) 在DWR调用之后要执行的函数.例如隐藏"正在加载数据.."信息
DWREngine.setPreHook(jsfun)在调用DWR之前,运行jsfun函数。DWREngine.setPostHook(jsfun)在调用完DWR后,运行jsfun函数。
当然我们可以用它来显示程序运行时的动画效果.
//====================================================================
//显示文字提示消息
function useLoadingMessage(message) {
var loadingMessage;
if (message) loadingMessage = message;
else loadingMessage = "Loading";
DWREngine.setPreHook(function() {
vardisabledZone = $('disabledZone');
if(!disabledZone) {
disabledZone = document.createElement_x_x('div');
disabledZone.setAttribute('id', 'disabledZone');
disabledZone.style.position = "absolute";
disabledZone.style.zIndex = "1000";
disabledZone.style.left = "0px";
disabledZone.style.top = "0px";
disabledZone.style.width = "100%";
disabledZone.style.height = "100%";
document.body.appendChild(disabledZone);
var messageZone = document.createElement_x_x('div');
messageZone.setAttribute('id', 'messageZone');
messageZone.style.position = "absolute";
messageZone.style.top = "0px";
messageZone.style.right = "0px";
messageZone.style.background = "red";
messageZone.style.color = "white";
messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
messageZone.style.padding = "4px";
disabledZone.appendChild(messageZone);
var text = document.createTextNode(loadingMessage);
messageZone.appendChild(text);
}
else {
$('messageZone').innerHTML = loadingMessage;
disabledZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
$('disabledZone').style.visibility = 'hidden';
});
}
//====================================================================
//用图片显示动态效果
function useLoadingImage(imageSrc) {
var loadingImage;
if (imageSrc) loadingImage = imageSrc;
else loadingImage = "ajax-loader.gif";
DWREngine.setPreHook(function() {
vardisabledImageZone = $('disabledImageZone');
if(!disabledImageZone) {
disabledImageZone = document.createElement_x_x('div');
disabledImageZone.setAttribute('id', 'disabledImageZone');
disabledImageZone.style.position = "absolute";
disabledImageZone.style.zIndex = "1000";
disabledImageZone.style.left = "0px";
disabledImageZone.style.top = "0px";
disabledImageZone.style.width = "100%";
disabledImageZone.style.height = "100%";
var imageZone = document.createElement_x_x('img');
imageZone.setAttribute('id','imageZone');
imageZone.setAttribute('src',imageSrc);
imageZone.style.position = "absolute";
imageZone.style.top = "0px";
imageZone.style.right = "0px";
disabledImageZone.appendChild(imageZone);
document.body.appendChild(disabledImageZone);
}
else {
$('imageZone').src = imageSrc;
disabledImageZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
$('disabledImageZone').style.visibility = 'hidden';
});
}
用dwr技术查询海量数据时,用户点击按钮,提交请求后,页面长时间没反应.问题反映到我这.当然除了要提高性能外,也得给用户一个提示,比如出现"正在加载数据.."的提示.
解决办法:
如果要实现这种效果,就得在客户端用js判断加载情况,请求前是一种状态,请求后(后台处理,返回数据给前台)又是一种状态.
dwr工具包提供了两个函数,专门处理这两种情况:
(1) 请求前处理
DWREngine.setPreHook(jsfun)
在DWR调用之前设置执行一个函数(但是这个函数无参数),例如显示"正在加载数据.."信息
(2)请求后处理
DWREngine.setPostHook(jsfun) 在DWR调用之后要执行的函数.例如隐藏"正在加载数据.."信息
DWREngine.setPreHook(jsfun)在调用DWR之前,运行jsfun函数。DWREngine.setPostHook(jsfun)在调用完DWR后,运行jsfun函数。
当然我们可以用它来显示程序运行时的动画效果.
//====================================================================
//显示文字提示消息
function useLoadingMessage(message) {
var loadingMessage;
if (message) loadingMessage = message;
else loadingMessage = "Loading";
DWREngine.setPreHook(function() {
vardisabledZone = $('disabledZone');
if(!disabledZone) {
disabledZone = document.createElement_x_x('div');
disabledZone.setAttribute('id', 'disabledZone');
disabledZone.style.position = "absolute";
disabledZone.style.zIndex = "1000";
disabledZone.style.left = "0px";
disabledZone.style.top = "0px";
disabledZone.style.width = "100%";
disabledZone.style.height = "100%";
document.body.appendChild(disabledZone);
var messageZone = document.createElement_x_x('div');
messageZone.setAttribute('id', 'messageZone');
messageZone.style.position = "absolute";
messageZone.style.top = "0px";
messageZone.style.right = "0px";
messageZone.style.background = "red";
messageZone.style.color = "white";
messageZone.style.fontFamily = "Arial,Helvetica,sans-serif";
messageZone.style.padding = "4px";
disabledZone.appendChild(messageZone);
var text = document.createTextNode(loadingMessage);
messageZone.appendChild(text);
}
else {
$('messageZone').innerHTML = loadingMessage;
disabledZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
$('disabledZone').style.visibility = 'hidden';
});
}
//====================================================================
//用图片显示动态效果
function useLoadingImage(imageSrc) {
var loadingImage;
if (imageSrc) loadingImage = imageSrc;
else loadingImage = "ajax-loader.gif";
DWREngine.setPreHook(function() {
vardisabledImageZone = $('disabledImageZone');
if(!disabledImageZone) {
disabledImageZone = document.createElement_x_x('div');
disabledImageZone.setAttribute('id', 'disabledImageZone');
disabledImageZone.style.position = "absolute";
disabledImageZone.style.zIndex = "1000";
disabledImageZone.style.left = "0px";
disabledImageZone.style.top = "0px";
disabledImageZone.style.width = "100%";
disabledImageZone.style.height = "100%";
var imageZone = document.createElement_x_x('img');
imageZone.setAttribute('id','imageZone');
imageZone.setAttribute('src',imageSrc);
imageZone.style.position = "absolute";
imageZone.style.top = "0px";
imageZone.style.right = "0px";
disabledImageZone.appendChild(imageZone);
document.body.appendChild(disabledImageZone);
}
else {
$('imageZone').src = imageSrc;
disabledImageZone.style.visibility = 'visible';
}
});
DWREngine.setPostHook(function() {
$('disabledImageZone').style.visibility = 'hidden';
});
}
相关文章推荐
- dwr 实现页面数据加载等待状态
- dwr 实现页面数据加载等待状态
- 数据加载等待页面的VB.NET代码实现
- android快速开发框架--快速实现 页面 加载中 加载失败 无数据等状态以及下拉刷新和自动加载
- iOS - 网络数据加载等待页面的简单实现
- 基于jquery实现页面滚动到底自动加载数据的功能
- js,jqueryajax实现页面加载等待效果
- 多线程实现大量数据加载时的等待画面
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- jquery 处理页面弹出层查询数据等待的操作(gif图片加载等待)
- Django 1.11 前端数据异步加载(前端页面单独请求用户登录状态)
- javascript实现页面加载,预读取完数据后再显示页面
- [原创]如何在MS Ajax Extensions 1.0中实现数据加载时的等待对话框
- zTree实现打开页面时异步加载数据及选中项ID提交到后台
- jquery实现页面提示,数据正在加载中。(
- 【Android开发技巧】在Activity页面中如何实现Fragment数据的缓加载
- 滑轮滚动到页面底部ajax加载数据配合json实现
- 【原创】ExtJs实现定时读取数据,动态加载数据,页面不刷新。Struts 2框架下JSON传值
- javascript实现页面加载,预读取完数据后再显示页面
- JS实现-页面数据无限加载