g3.cc

사수마 2002/11/01 05:05:10	11060 0

이미지 로딩 실패시 대처 이미지로...

출처 : korea.internet.com

사이트를 운영하다 보면 이미지를 읽어 들일 때 에러가 발생할 경우 대체 이미지를 보여주고 싶은 경우들이 있다. 그렇다면 어떻게 이것을 가능하게 할 수 있을까? 다행히 img 태그는 onerror 이벤트 핸들러를 가지고 있다. 이 이벤트 핸들러를 잘 활용하면 원하는 결과를 얻을 수 있다.

우선 존재하는 이미지와 존재하지 않는 이미지에 대한 소스를 각각 살펴보자:

<img src="/images/abcd.gif"> (이미지 존재 X)
<img src="/images/kictop_26.gif"> (이미지 존재 O)

이제 /images/abcd.gif 란 이미지가 존재하지 않을 때 /images/kictop_1.gif 이미지로 대체하는 소스를 살펴보도록 하자:

<IMG ONERROR="var altSrc = '/images/kictop_26.gif'; this.src = altSrc;" SRC="/images/abcd.gif" >

만일 각각의 이미지 객체에 대해 에러 이벤트 핸들러 함수를 지정하여 사용하고 싶다면 다음과 같이 할 수도 있을 것이다:

function imgErrorHandler (evt) {
var altSrc = '/images/kictop_26.gif';
this.src = altSrc;
}

var img = new Image();
img.onerror = imgErrorHandler;
img.src = '/images/abcd.gif';

코멘트를 작성하시면 2 포인트가 지급됩니다.





120	shift키 숨겨진 비밀?		12/09	10549

118	마우스 누르면 누른효과 느낌나기		12/02	10729

121	리소스 관련팁		12/10	10776

78	alias를 이용해서 dir명령을 사용하자	송군	05/27	10990

116	보기싫은 가로스크롤바 없애자!		12/02	10994

82	[자바]접속시에 배경음악을 랜덤하게 바꾸어 보자...	비즈맨	07/08	11020

192	원승교의 인터넷상점 책 보셨나요?	멋쟁이	05/31	11027

138	웹상의 이미지가 BMP로만 저장될때	▩모잘라曰	01/10	11038

113	브라우져에서 흔히 볼수있는 에러 리스트 입니다...		11/25	11046

200	계란 아주 맛있게 먹기	막데무싸	06/04	11053

79	퍼미션 홀랑 다 바꾸기.	송군	05/27	11053

141	색다른 링크법(새창)		01/28	11054

186	♥라면을 좋아하시는 여러분!	막데무싸	05/30	11055

77	flashcount성공기...^ ^a	이제경	05/23	11058

119	[데이타 전송중] 이미지 바꾸자		12/06	11060

LAST