Rev. 2.73

이것저것 작업하다보면 웹페이지에 이미지가 깨질수도 있는데
일일이 찾아보기도 그렇고 해서 만들어봤습니다.

페이지 하단에

<script>
for(i = 0; i < document.images.length; i++)
    document.images[i].onerror = ERImg;

function ERImg() {
    var el = event.srcElement;

    el.style.visibility = 'hidden';

    ERSend(el.src);
}

function ERSend(ERMsg) {
    if(ERMsg.length > 0) {
        document.getElementById('ErrorReporting').src = 'error.html?m=' + ERMsg;
    }
}
</script>

<img id="ErrorReporting" src="" style="height:0px; width:0px; visibility:hidden;" onerror="" />

error.html은 그냥 뭐.. 받은 메세지를 메일로 보내거나 기록하거나
적당한 그런 동작을 하도록 하면 되겠네요.
주의할점은 페이지 끝날때(뒤에 더이상 img tag가 나오지 않을때) 넣어줘야하고요
아래 에러처리를 위해 넣은 이미지는, 위에 onerror핸들러 등록하는것
뒤에 넣어주는게 편합니다. (안그러면 계속 에러가 나서...)

메일로 알려주는거 뿐아니라 보기싫은 빨간 x 박스대신 다른 이미지를 표시하도록 하는 기능으로도 사용 가능하겠네요 : )

추가] 이미지 하나씩에 대해서 간단히 처리하기..

<img src='./images/test.gif' onError="var blankSrc = 대체이미지경로; this.src = blankSrc;">

-- 대체이미지를 사용할 수 있습니다.
대체이미지 앞뒤로 따옴표 잊지 마시길. ^_^;

<img src=aaa.gif onError="this.src='error.gif'">

로 하면 더 간단하겠네요

출처 : Ssemi™

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar