43dwr - util.js 功能（useLoadingMessage）

这个方法将来可能被废弃，因为这个实现实在太专断了。为什么是红色，为什么在右上角，等等。唯一的真正答案就是：抄袭 GMail。这里的建议是以本页面中的代码为模板，根据你的需求自定义。

你必须在页面加载以后调用这个方法(例如，不要在 onload()事件触发之前调用)，因为它要创建一个隐藏的div 来容纳消息。

最简单的做法时在 onload 事件中调用 DWRUtil.useLoadingMessage，像这样:

 
 function init() {
 DWRUtil.useLoadingMessage();
 }
 
 ...

可能有些情况下你是不能容易的编辑 header 和 body 标签(如果你在使用 CMS，这很正常)，在这样的情况下你可以这样做：

function init() {
 DWRUtil.useLoadingMessage();
}
if (window.addEventListener) {
 window.addEventListener("load", init, false);
}
else if (window.attachEvent) {
 window.attachEvent("onload", init);
}
else {
 window.onload = init;
}

下面这些是这个函数的代码，它对于你要实现自己的加载消息很有用。这个函数的主要内容是动态创建一个 div(id 是 disabledZone)来容纳消息。重要的代码是当远程调用时使它显示和隐藏.

DWREngine.setPreHook(function() {
 $('disabledZone').style.visibility = 'visible';
});
DWREngine.setPostHook(function() {
 $('disabledZone').style.visibility = 'hidden';
});
This is fairly simple and makes it quite easy to implement your own 
"loading" message.
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';
 });
}

然后你就可以这样使用:useLoadingImage(“images/loader.gif”)；