g3.cc

사수마 2002/11/01 05:05:10	10528 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 포인트가 지급됩니다.





70	ActiveX control...	서태웅	05/11	10545

27	몇시 몇분에 글을 썼지요? [1]	짜아앙曰	12/29	10542	12/29(17:35)

>>	이미지 로딩 실패시 대처 이미지로...	사수마	11/01	10528

65	[팁(?)]로그아웃시 페이지 이동 시키기...	izen	04/19	10517

67	[팁(?)]권한 없는 페이지에서...	izen	04/19	10514

73	날씨...^^		05/13	10513

66	[팁(?)]아래에 이어 또 다른 방법--권한없는 페이...	izen	04/19	10513

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

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

117	커서모양바꾸기		12/02	10508

71	노프레임 홈페이지에서 카테고리를 사용할때 테이...	서태웅	05/11	10483

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

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

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

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

FIRST

LAST