AJAX: LOADING

간단하게 LOADING을 구현 할 수 있게 도와 준다.

http://aka-fotos.de/protoload/

적당히 설치 한후에

prototype 에서

function doSearch(arg){
 var url = 'xxx.xml';
  var myAjax = new Ajax.Request(
  url, 
  {
      //asynchronous: false,
   method: 'post', 
   parameters: {arg:arg}, 
   onComplete: completeFunction,
   onFailure: reportError,
   onLoading: function() {
             $("target").startWaiting('bigWaiting');
         }
   
  });
}

처럼 onLoading에 등록하고

$("target").stopWaiting(); 으로 적당한 (complete function 쯤)에서 닫아 주면 된다.

ps. 위치에 제대로 나오지않을 경우엔

1. 스크린 오브젝트를 appendChild하는 부분
원본
(element.offsetParent || document.body).appendChild(element._loading = e);
수정본
document.body.appendChild(element._loading = e);

2. 스크린오브젝트 위치 구하는 부분
원본
var left = this.offsetLeft,
top = this.offsetTop,
width = this.offsetWidth,
height = this.offsetHeight,
l = this._loading;

수정본
pos = Position.cumulativeOffset(this);
var left = pos[0],
top = pos[1],
width = this.offsetWidth,
height = this.offsetHeight,
l = this._loading;

처럼 수정해 주면 된다.

http://10year.tistory.com/39 에서 인용.