[jvs] 실시간 이미지 로드시 에러처리 하기(onError, onLoad) JavaScript_VBScript

자주 쓰이는 태그는 아니지만, 이미지 태그에서는 onError 와 onLoad 이벤트를 이용해 유동적으로 처리할 수 있는 방법을 제공하고 있다.

onError 이벤트는 에러가 발생했을때 작동하며, onLoad 이벤트는 사용자의 컴퓨터로 다운로드가 완료되었을때 작동한다.
onLoad 이벤트의 경우에는 다른 곳에서도 자주 쓰인다.

실시간으로 이미지 로드시 에러처리 하기.. 라 한다면,
일전에 휴대폰 문자 메세지(문자,사진,영상)를 이용한 실시간 채팅 사이트를 만든적이 있는데,
그런 경우에 발생할 수 있는 시간차(DB에 정보가 저장되는 시간과 실제로 물리적 파일이 서버에 들어오는 시간)가 발생하여서,
DB 검색 결과로는 사진이나 영상이 들어왔다고 볼 수 있지만, 아직 서버상에 사진파일이나 영상파일이 완전히 전달되지 않은 미묘한 시간차이가 발생하게 되고, 실시간으로 정보를 검색하는 사용자의 브라우저에서는 엑스박스로 표시된 이미지가 표시될 가능성이 있다.

물론, 해당 사이트를 구축할때는 단순히 onError 이벤트만을 이용해서 무한 루핑하며 이미지 파일을 계속 검색하게 하는 방법을 사용하였기 때문에, 일순간 엑스박스가 달린 이미지가 표시되는 문제가 발생하였다.

이러한 문제를 해결하기 위해서는,
해당 이미지를 최초에 불러올때 사이즈를 0으로 하여서 화면에 표시되지 않도록 기본값으로 주고,
onError 이벤트를 이용해서 이미지가 완전히 불러와질때까지 반복하며 링크를 요청한다.
그런다음, 만약 이미지가 완전히 도착해서 로딩이 완료되면 onLoad 이벤트가 작동하게 되고,
이후, 해당 이미지의 사이즈를 조정해서 화면에 보이도록 바꿔주는 것이다.

예시를 보자.

<img id="vi" name="vi" src="1.jpg" width=0 height=0 onError="javascript:setTimeout('viewreload(this.src)',500);" onLoad="javascript:viewsize(this);">

<script language="javascript">
function viewreload(s){
  vi.src="1.jpg";
}
function viewsize(t){
  t.width=100;
  t.height=100;
}
</script>

위와같이 코딩을 했다고 하자.
즉, vi 라는 아이디를 가진 이미지 태그에 onError 이벤트와 onLoad 이벤트에 함수를 연결한다.

이미지 태그에서 지정한 링크(src) 주소에 해당 이미지가 없으면(아직 도착하지 않은 경우),
onError 이벤트가 발생하게 되는데, 0.5초 단위로 viewreload 함수를 호출한다.
이때 해당 이미지 태그의 링크주소도 함께 보내준다.
그러면 viewreload 함수에서는 해당 링크주소를 다시 로드한다.
이렇게 해당 이미지 주소에 이미지가 정상적으로 들어올때까지 0.5초 단위로 계속 링크를 시도하게 된다.
(onError 이벤트는 한번만 작동하지만, 링크를 다시 시도했다가 에러가 나면 다시 작동한다.)
그러다가 해당 링크주소에(서버상에서) 이미지가 도착(물리적으로 다른 서버로부터 전송완료) 하면,
해당 이미지 태그의 onLoad 이벤트가 동작한다.
그러면 viewsize 함수가 동작하게 되는데, 이 함수에서는 해당 이미지 태그에서 넓이와 높이를 0 으로 해주었던 값을 수정하여 100 으로 값을 바꿔주게 되고, 그러면 화면에 표시가 되는 원리다.

물론, 임의로 발생하는 이미지는 각각 개별적인 아이디를 부여해야 하기 때문에 위의 스크립트를 그대로 사용할 수 없고,
별도로 더 추가로 코딩을 해줘야 하지만, 원리상 이렇게 동작시킬 수 있다는 점을 이해할 수 있기를 바란다.


덧글

댓글 입력 영역
* 비로그인 덧글의 IP 전체보기를 설정한 이글루입니다.


통계 위젯 (화이트)

479536
4352
10977241

google_myblogSearch_side

▷검색어

Flag Counter style2