浏览 7703 次
锁定老帖子 主题:用dwr技术显示页面数据加载状态
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-01-13
用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() { var disabledZone = $('disabledZone'); if (!disabledZone) { disabledZone = document.createElement('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('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() { var disabledImageZone = $('disabledImageZone'); if (!disabledImageZone) { disabledImageZone = document.createElement('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('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'; }); } 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2008-05-14
能否问下如何调用
|
|
返回顶楼 | |
发表时间:2008-06-03
直接调用方法名就可以了。
|
|
返回顶楼 | |
发表时间:2008-06-03
直接调用方法名就可以了。
|
|
返回顶楼 | |
发表时间:2008-09-10
为什么程序走到了
DWREngine.setPreHook() 这一步, 就不进行了,直接跳过了这个方法。 |
|
返回顶楼 | |
发表时间:2008-11-14
怎样改变它显示的位置啊?
|
|
返回顶楼 | |