再谈DWRUtil.useLoadingImage

再谈DWRUtil.useLoadingImage(转)

from: http://lotuslive.blogdriver.com/lotuslive/1180945.html

其实DWRUtil.useLoadingImage使用的是DWREngine的钩子，设置了PreHook()和PostHook()。

DWREngine.setPreHook(function)在调用DWR之前，运行function函数。DWREngine.setPostHook(function)在调用完DWR后，运行function函数。所以我们可以用它来显示程序运行时的动画效果，并可以解决表单重复提交的问题。例如：点击提交按钮后，就把按钮隐藏，后台程序运行完毕后，再把按钮显示出来。为此目的，下面修改了DWRUtil.useLoadingImage代码：

/**
 * 使用loading image，并且还可以隐藏按钮
 * @param imageSrc 图像地址
 * @param item 要隐藏的html item对象数组
 * @author huangqiao
 * @date 2006-5-11
 */
DWRUtil.useLoadingImage = function(imageSrc,items) {
  var loadingImage;
  if (imageSrc) loadingImage = imageSrc;
  else loadingImage = "ajax-loader.gif";
  DWREngine.setPreHook(function() {
    if(items != null) {
      for(var i=0; i<items.length; i++)
      items[i].style.visibility = 'hidden';
    }
    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() {
    if(items != null) {
      for(var i=0; i<items.length; i++)
      items[i].style.visibility = 'visible';
    }
    $('disabledImageZone').style.visibility = 'hidden';
  });
};

使用方法，在页面加载时就调用此函数：
DWRUtil.useLoadingImage("images/loader.gif",[$("buttonId_1"),$("buttonId_2")]);

当调用DWR时，就会显示加载图片，并将id为"buttonId_1"和"buttonId_2"的按钮隐藏；调用结束后，隐藏加载图片，并将已隐藏的按钮再次显示出来。

如果不想隐藏按钮，直接使用DWRUtil.useLoadingImage("images/loader.gif")即可。注意的是：DWRUtil.useLoadingImage只需调用一次就可设置DWR引擎的钩子，在同个页面中不需再多次调用。