Ajax을 이용한 UI에서 로딩인티케이터 컴포넌트를 사용하다 생긴 문제점을 개선해 보았다.

컴포넌를 처음 알게된 곳은 여기. http://firejune.com/1132&stext=protoload

위 포스트에도 언급되어 있지만, 이 컴포넌트의 큰 작정은 Dom Element단위로 인디케이터의 타겟을 지정할 수 있는것이다. 그런데 이 기능을 사용하다 보니 아래와 같은 문제점을 발견했다.

[문제점]
타겟 element가 tbody/tr/td와 같이 div와 동일레벨에 위치할 수 없는 경우, 즉 타겟 element의 parent에 div를 appendChild할 수 없는 경우 인디케이터의 위치가 정확하게 표시되지 않고, IE6.0의 경우 브라우저가 죽어버린다.

[원인]
div오브젝트로 인디케이터 오브젝트를 생성하고, 지정된 element의 offsetParent에 appendChild하게 되는데, tbody/tr/td를 타겟 element로 셋팅한 경우 그 offsetParent인 table 등에는 div 를 appendChild할 수 없다. 실제로 실행해보면 인디케이터오브젝트는 body의 child로 삽입되게 되다. 그런데 인디케이터의 위치를 구할때는 타겟 element의 parent를 기준으로 구하고(offsetLeft, offsetTop), 디스플레이는 body를 기준으로 하므로 보여지는 위치가 틀리게 된다. 더하여 IE6.0의 경우 인디케이터 오브젝트의 style.filter를 셋팅하다가 죽어버린다.

[해결책]
인디케이터 오브젝트를 항상 body에 appendChild하고, 스크립오브젝트의 위치를 body를 기준으로 계산하는 식으로 소스를 수정하면 정상적으로 동작할 것 같다. 성능의 차이가 있긴 하겠지만 이정도는... ^

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;