img에 onerror이벤트를 tag의 속성이 아닌 자바스크립트로 등록하기

img가 로드가 안될때 기본이미지를 보여주고 싶을때 onerror를 사용합니다.

<img src="기본이미지.png"  alt="대체텍스트" onerror="this.src='대체이미지.png';" />

이런식으로 사용을 하는데;  문제는 validator 에서 onerror은 에러로 뱉어내버리죠…
그냥 안쓰거나 밸리데이터 따위 무시해주면 되겠지만 onerror도 사용하고 밸리데이터도 통과해야하는 경우가 얼마든지 있을수있죠.
그래서 그냥 이벤트를 자바스크립트로 등록하는것을 만들어봤습니다.

핵심은 IE와 IE외의 브라우저가 이벤트 등록하는것이 다르다는것입니다.
IE의경우에는 attachEvent 를 이용해서 onerror를 등록하고  일어난이벤트의 srcElement의 src값을 변경해주면 됩니다.

"이미지DOM".attachEvent("onerror",function(e) { e.srcElement.src ="images/pic_noimg.gif"})

그외 Opera, FF, safari, chrome 에서는

"이미지DOM".onerror = function(e) { e.target.src = "images/pic_noimg.gif";};

이렇게 해주니 되더라구요. 사실 addEventListener를 사용해볼까 했었는데 귀찮아서 패스=_=
그럼 이만(제목에 비해 겁네 포스팅이 허접하군요=_=/ )

  • 안녕하세요~
    우와, 찾던 내용인데 제가 초짜라;;
    혹시 데모페이지를 올려주실순 없나요?! ㅠ

    추운데 감기조심하세요 ~(__~)

  • http://mydeute.com/tip/onerror/

    로 올려드렸습니다.

    방문해주셔서 감사드립니다.

  • 오, 이렇게나 빨리~~~
    감사합니다, 유용하게 사용하겠습니다.

  • 알려 주신 정보가 큰 도움이 되었습니다.
    똑같지는 않지만 텍스트큐브의 블로그 아이콘 표시에 응용해 보았습니다.

  • 원빈

    우리 웹표준 점검 예외 항목에 있눈고자나영~

  • 회사다니기전에쓴거란다 -_-

  • 원빈

    어라 그러네~ 팟장님 미안용.ㅋㅋㅋㅋ 새삼스럽게..ㅋㅋ