Busy.js: Canvas로 읽는 로딩 이미지

2008.04.17 23:33 from [IT] Web Tech
from Busy.js: Loading indicators with Canvas on Ajaxian

사용자 삽입 이미지

나날이 Canvas에 대한 예제들이 늘어갑니다. 아마도 MS가 Canvas 진영에 참가하는 일이 생긴다면, 엄청나게 불붙을 것 같다고 추측해봅니다. VML을 조금만 다듬으면 금새 Canvas 가 될 것 같은데 말입니다.
_______________
Christian Effenberger 씨가 조금 더 캔버스다운 물건을 들고 돌아왔습니다. Busy.js를 릴리스했지요. Build.js는웹페이지의 HTML 엘리먼트에 로딩 이미지를 추가/제거할 수 있는 라이브러리입니다(오버레이 색상 & 투명효과 포함). 여러분의 코드를 깔끔하게 유지하기 위해 겸손한 JavaScript를 사용했습니다. 플러그인이나 확장기능도 필요없고 다른 외부 리소스도 필요없습니다.

사용법
[code:js]
var ctrl = getBusyOverlay(document.getElementById('box'));
ctrl.remove();

기능

  • Canvas와 VML 지원 (동일하게 보임)
  • 쉽고 빠른 구현 (Ajax 프로그램에 완전 적합)
  • gif 애니메이션 제작을 위한 이미지 에디터 사용에 시간을 들일 필요가 없음
  • 개별 스타일을 위한 다양한 파라미터로 매우 유연함
  • 부모 엘리먼트 스타일에 관계없이 적절한 로딩 이미지 제공
  • 다음 블럭 레벨 부모 엘리먼트를 찾기 위해 DOM 트리 상위로 이동
  • 부모 객체를 시각적(오버레이), 기술적(마우스 이벤트)으로 정지
  • 심지어 (moz/webkit)-border-radius이 활성화되어있는 HTML 엘리먼트와도 동작
  • 구식 브라우저에서는, 단순한 사각형 모양 표시
  • HTML 엘리먼트에 로딩 이미지를 추가하거나 삭제하는게 죽여주게 쉬움

'[IT] Web Tech' 카테고리의 다른 글

Mad Mimi: WYSIWYG Email 마케팅  (0) 2008.04.18
세가지 유용한 JavaScript 라이브러리  (0) 2008.04.18
W3C XMLHttpRequest 최종 초안  (0) 2008.04.17
DOH, 내 코드를 테스트해줘!  (0) 2008.04.17
Busy.js: Canvas로 읽는 로딩 이미지  (0) 2008.04.17
JavaScript : The Good Parts  (0) 2008.04.17
Dojo XHR 플러그인; 오늘은 XHR을 어떻게 할까요?  (0) 2008.04.17
Ajax 모자이크 이미지 생성기  (0) 2008.04.16
jQuery와 Prototype 벤치마크  (0) 2008.04.16
TAG , ,
Posted by 행복한고니 트랙백 1 : 댓글 0

댓글을 달아 주세요