[JavaScript] 이미지 불러오기 오류시 onerror

onerror 

- 이미지를 로드할 때 오류가 발생하면 작동한다.

- 외부 파일 (예 : 문서 또는 이미지)을로드하는 동안 오류가 발생하면 작동한다.

 

 

아래는 이미지를 로드하려는데 서버에서 불러오는게 느릴 경우

onerror를 사용해서 로딩을 계속 시도하게 한 소스

 

• HTML 소스

<img src="./image.jpg" alt="이미지" onerror="onErrorImage(this)"/>

 

• javascript 소스

function onErrorImage(_img) {
	// 처음 에러가 나면 data-load-num에 0부여
	var loadNum = $(_img).attr('data-load-num') == undefined ? 0 : $(_img).attr('data-load-num');
    
	if (loadNum < 3){		// 이미지를 3번 불러옴
		$(_img).attr('data-load-num', ++loadNum);
		$(_img).attr('src', 계속 불러올 이미지);
	} else {			// 이미지 없음 표시
		$(_img).attr('src', ./nopicture.png");
	}
}

 

 

• 자바스크립트에서 사용시 addEventListener() 메소드로 사용가능

object.addEventListener("error", script);

 

참고 : addEventListener () 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않는다.