g3.cc

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





189	면티 한방에 깔끔하게 정리하기!!! [1]	막데무싸	05/30	13167	06/03(10:56)

188	연애하면서... 싸우는 기술을 익히자	막데무싸	05/30	11383

187	음악방송을 하는 방법..	막데무싸	05/30	13288

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

185	좋은 비누를 고르는 방법	막데무싸	05/30	11750

184	인터넷 검색할때 한방에 편하게 하세요 ^^	막데무싸	05/30	11953

183	이미지 사이즈 줄이기.. [1]	사탄의인형	05/19	12178	05/23(14:02)

182	아웃룩 계열 실행시 암호걸기..	사탄의인형	05/04	12231

181	쉽고도 어려운 embed 태그 & 미디어 플레이어		03/30	13544

180	RE:경로가 정확한데도 이미지가 않보인다면...	카푸	03/18	13904

179	지도 편달 바랍니다 [1]	ting	03/03	11476	03/04(00:15)

178	Windows XP에서 ADSL 접속프로그램 없이 인터넷 ...		02/27	12866

177	컴퓨터를 켜고 나서 너무 오래기다릴때...	미야우	02/25	11731

176	경로가 정확한데도 이미지가 않보인다면... [3]		01/20	12320	02/05(00:14)

175	Win2K, XP에서 160GB 이상의 고용량 하드 사용하...		01/14	12480

FIRST

LAST