g3.cc

사수마 2002/11/01 05:05:10	10999 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';